jQuery UI 主題

jQuery UI 主題

本節(jié)將介紹jQuery UI主題。

jQuery UI平臺包含兩個子框架：小部件框架和CSS框架。

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

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

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

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

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

主題化

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

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

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

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