進一步瞭解元件樣式

自訂元件樣式是一個簡單的練習。 依預設,每個元件都有一個相關聯的階式樣式表 (CSS)。 如果您在專案導覽器中開啟 WebContent/theme 目錄,您會見到每個元件的 CSS 檔。 比方說,標籤畫面元件有一個 tabpanel.css。 按兩下 tabpanel.css 會啟動 CSS 編輯器,供您自訂每個樣式。樣式表會有文件說明,讓您瞭解每個樣式的目的。 如果您查看 tabpanel.css 檔,您會發現所有樣式的開頭都是 .TabbedPanel 字首。 預先定義的 "sets" 樣式有四種:. TabbedPanel 、. TabbedPanel_1 、. TabbedPanel_2 和 . TabbedPanel_3 。

樣式集是一個需要瞭解的重要概念。 標籤畫面之類的複式控制項沒有單一樣式。我們使用一組樣式,它們的字首都附加了相同的標籤。 樣式集非常有用,因為它們可讓開發人員在他們的頁面中,以不同的方式來自訂個別元件的外觀與操作方式。比方說:

如果要知道這是如何運作的,請嘗試下列步驟:

  1. 在「設計」視圖中,選取第一個標籤畫面控制項。
  2. styleClass 屬性改成 .TabbedPanel_1

請嘗試各種動作,選取其他樣式來查看它們分別有什麼效果。

使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.