jQuery UI 主題

所有的 jQuery UI 外掛程式都允許開發人員無縫整合 UI 小部件到他們網站或應用程式的外觀和感觀。每個外掛程式透過 CSS 定義樣式，且包含了兩層樣式資訊：標準的 jQuery UI CSS 框架 樣式和特定的外掛樣式。

jQuery UI CSS 框架提供了語義表示的類，用來表明小部件內元素的角色，例如標題、內容或可點擊區域。這些在所有的小部件中都是一致的，一個可點擊的tab（標籤頁）、accordion（折疊面板）或button（按鈕）都有相同的ui-state-default class，用來表明它們是可點擊的。當使用者滑鼠懸浮在這些元素上面時，這個 class 就變成 ui-state-hover，當選取這些元素時則變成 ui-state-active。這些 class 的一致性使得所有元件中具有相似角色或互動狀態的元素在外觀表現上一致。

CSS 框架樣式封裝在一個單獨的檔案中，名稱為 ui.theme.css。這個檔案時透過 ThemeRoller 應用程式來修改的。框架樣式只包含影響外觀和感觀的屬性，只要是顏色、背景圖像、圖示等。所以這些是 "安全的" 樣式，不會影響到外掛的功能。這種分隔意味著開發人員可以透過在 theme.css 檔案中修改顏色和圖像來創建一個自訂的外觀和感官。由於未來的插件或 bug 修復將是可用的，這些不通過修改即可與主題一起使用。

由於框架樣式只涵蓋了外觀和感觀，所以還需要包含特定的外掛樣式表，這些樣式表包含了所有額外的讓小工具具有功能性的結構樣式規則，例如尺寸、內邊距、外邊距、定位、浮動。每個外掛程式的樣式表位於 themes/base 資料夾內，且配合外掛程式進行命名，例如 "jquery.ui.accordion.css"。這些樣式必須認真編輯，因為它們與腳本一起提供了框架樣式的覆蓋。

我們鼓勵所有的開發人員創建 jQuery 插件，jQuery UI CSS 框架使得最終用戶更容易自訂主題和使用插件。

主題化

下面列出了三種主題化jQuery UI 外掛程式的一般方法：

• ##下載ThemeRoller 主題 ：最早的創建主題的方式是使用ThemeRoller 來產生和下載一個主題。這個應用程式將建立一個新的 ui.theme.css 檔案和一個包含了所有必要的背景圖像及圖示精靈的 images 資料夾。這個方法是最早的創建和維護主題的方式，但是它對 ThemeRoller 中提供的選項限制了自訂。

• 修改CSS 檔案：為了對外觀和感觀做進一步的控制，您可以選擇從預設主題（Smoothness）開始，或從一個由ThemeRoller 產生的主題開始，然後調整ui.theme.css 文件，或任一個獨立插件的樣式表。例如，您可以輕鬆調整所有按鈕的角半徑為不同於其他 UI 元件的值，或使用自訂設定為圖示精靈變更路徑。透過一點點的樣式範圍，您甚至可以在一個 UI 中同時使用多個主題。為了易於維護，建議只更改 ui.theme.css 檔案和圖像。

• 重新編寫自訂的CSS：為了最大程度地控制外觀和感觀，可以重新開始編寫每個插件的CSS，而不使用框架類或特定的外掛樣式表。如果想要的外觀和感觀不能透過修改 CSS 來實現或使用高度自訂的標記，那麼就可以採用這個方法。這個方法要求在 CSS 方面有深厚的專業知識，並且要求手動更新未來的插件。

使用ThemeRoller、jQuery UI CSS 框架，以及設計自訂主題

• jQuery UI ThemeRoller

• #jQuery UI CSS 框架API

• 設計主題