jQuery UI 主題

所有的 jQuery UI 插件都允許開發(fā)人員無縫集成 UI 小部件到他們網(wǎng)站或應(yīng)用程序的外觀和感觀。每個插件通過 CSS 定義樣式，且包含了兩層樣式信息：標(biāo)準(zhǔn)的 jQuery UI CSS 框架 樣式和具體的插件樣式。

jQuery UI CSS 框架提供了語義表示的類，用來表明小部件內(nèi)元素的角色，比如標(biāo)題、內(nèi)容或可點擊區(qū)域。這些在所有的小部件中都是一致的，一個可點擊的 tab（標(biāo)簽頁）、accordion（折疊面板）或 button（按鈕）都有相同的 ui-state-default class，用來表明它們是可點擊的。當(dāng)用戶鼠標(biāo)懸浮在這些元素上面時，這個 class 就變成 ui-state-hover，當(dāng)選中這些元素時則變成 ui-state-active。這些 class 的一致性使得所有部件中具有相似角色或交互狀態(tài)的元素在外觀表現(xiàn)上一致。

CSS 框架樣式封裝在一個單獨的文件中，名為 ui.theme.css。這個文件時通過 ThemeRoller 應(yīng)用程序來修改的。框架樣式只包含影響外觀和感觀的屬性，只要是顏色、背景圖像、圖標(biāo)等。所以這些是 "安全的" 樣式，不會影響到插件的功能。這種分隔意味著開發(fā)人員可以通過在 theme.css 文件中修改顏色和圖像來創(chuàng)建一個自定義的外觀和感觀。由于未來的插件或者 bug 修復(fù)將是可用的，這些不通過修改即可與主題一起使用。

由于框架樣式只覆蓋了外觀和感觀，所以還需要包含具體的插件樣式表，這些樣式表包括了所有額外的讓小部件具有功能性的結(jié)構(gòu)樣式規(guī)則，比如尺寸、內(nèi)邊距、外邊距、定位、浮動。每個插件的樣式表位于 themes/base 文件夾內(nèi)，且配合插件進行命名，比如 "jquery.ui.accordion.css"。這些樣式必須認(rèn)真編輯，因為它們與腳本一起提供了框架樣式的覆蓋。

我們鼓勵所有的開發(fā)人員創(chuàng)建 jQuery 插件，jQuery UI CSS 框架使得最終用戶更容易定制主題和使用插件。

主題化

下面列出了三種主題化 jQuery UI 插件的一般方法：

• 下載 ThemeRoller 主題：最早的創(chuàng)建主題的方式是使用 ThemeRoller 來生成和下載一個主題。這個應(yīng)用程序?qū)?chuàng)建一個新的 ui.theme.css 文件和一個包含了所有必需的背景圖像及圖標(biāo)精靈的 images 文件夾。這個方法是最早的創(chuàng)建和維護主題的方式，但是它對 ThemeRoller 中提供的選項限制了自定義。
• 修改 CSS 文件：為了對外觀和感觀做進一步的控制，您可以選擇從默認(rèn)主題（Smoothness）開始，或者從一個由 ThemeRoller 生成的主題開始，然后調(diào)整 ui.theme.css 文件，或者任意一個獨立插件的樣式表。例如，您可以很容易地調(diào)整所有按鈕的角半徑為不同于其他 UI 組件的值，或者使用自定義設(shè)置為圖標(biāo)精靈改變路徑。通過一點點的樣式范圍，您甚至可以在一個 UI 中同時使用多個主題。為了易于維護，建議只更改 ui.theme.css 文件和圖像。
• 重新編寫自定義的 CSS：為了最大程度地控制外觀和感觀，可以重新開始編寫每個插件的 CSS，而不使用框架類或者特定的插件樣式表。如果想要的外觀和感觀不能通過修改 CSS 來實現(xiàn)或者使用高度自定義的標(biāo)記，那么就可以采用這個方法。這個方法要求在 CSS 方面有深厚的專業(yè)知識，且要求手動更新未來的插件。

使用 ThemeRoller、jQuery UI CSS 框架，以及設(shè)計自定義主題

• jQuery UI ThemeRoller
• jQuery UI CSS 框架 API
• 設(shè)計主題