# jQuery UI 主題 所有的 jQuery UI 插件都允許開發人員無縫集成 UI 小部件到他們網站或應用程序的外觀和感觀。每個插件通過 CSS 定義樣式，且包含了兩層樣式信息：標準的 [jQuery UI CSS 框架](jqueryui-theme-api.html) 樣式和具體的插件樣式。 jQuery UI CSS 框架提供了語義表示的類，用來表明小部件內元素的角色，比如標題、內容或可點擊區域。這些在所有的小部件中都是一致的，一個可點擊的 tab（標簽頁）、accordion（折疊面板）或 button（按鈕）都有相同的 `ui-state-default` class，用來表明它們是可點擊的。當用戶鼠標懸浮在這些元素上面時，這個 class 就變成 `ui-state-hover`，當選中這些元素時則變成 `ui-state-active`。這些 class 的一致性使得所有部件中具有相似角色或交互狀態的元素在外觀表現上一致。 CSS 框架樣式封裝在一個單獨的文件中，名為 `ui.theme.css`。這個文件時通過 [ThemeRoller](jqueryui-theme-themeroller.html) 應用程序來修改的。框架樣式只包含影響外觀和感觀的屬性，只要是顏色、背景圖像、圖標等。所以這些是 "安全的" 樣式，不會影響到插件的功能。這種分隔意味著開發人員可以通過在 `theme.css` 文件中修改顏色和圖像來創建一個自定義的外觀和感觀。由于未來的插件或者 bug 修復將是可用的，這些不通過修改即可與主題一起使用。 由于框架樣式只覆蓋了外觀和感觀，所以還需要包含具體的插件樣式表，這些樣式表包括了所有額外的讓小部件具有功能性的結構樣式規則，比如尺寸、內邊距、外邊距、定位、浮動。每個插件的樣式表位于 `themes/base` 文件夾內，且配合插件進行命名，比如 "jquery.ui.accordion.css"。這些樣式必須認真編輯，因為它們與腳本一起提供了框架樣式的覆蓋。 我們鼓勵所有的開發人員創建 jQuery 插件，jQuery UI CSS 框架使得最終用戶更容易定制主題和使用插件。 ### 主題化 下面列出了三種主題化 jQuery UI 插件的一般方法： * **下載 ThemeRoller 主題**：最早的創建主題的方式是使用 [ThemeRoller](jqueryui-theme-themeroller.html) 來生成和下載一個主題。這個應用程序將創建一個新的 `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](jqueryui-theme-themeroller.html) * [jQuery UI CSS 框架 API](jqueryui-theme-api.html) * [設計主題](jqueryui-theme-design.html)