jQuery UI 主題

jQuery UI 主題

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

jQuery UI平臺(tái)包含兩個(gè)子框架：小部件框架和CSS框架。

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

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

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

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

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

主題化

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

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

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

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