jQuery UI 教程
本章節(jié)將介紹jQuery UI主題。
jQuery UI平臺(tái)包含兩個(gè)子框架：小部件框架和CSS框架。
所有的 jQuery UI 插件都允許開(kāi)發(fā)人員無(wú)縫集成 UI 小部件到他們網(wǎng)站或應(yīng)用程序的外觀和感觀。每個(gè)插件通過(guò) CSS 定義樣式，且包含了兩層樣式信息：標(biāo)準(zhǔn)的 jQuery UI CSS 框架 樣式和具體的插件樣式。
jQuery UI CSS 框架提供了語(yǔ)義表示的類(lèi)，用來(lái)表明小部件內(nèi)元素的角色，比如標(biāo)題、內(nèi)容或可點(diǎn)擊區(qū)域。這些在所有的小部件中都是一致的，一個(gè)可點(diǎn)擊的 tab（標(biāo)簽頁(yè)）、accordion（折疊面板）或 button（按鈕）都有相同的 ui-state-default class，用來(lái)表明它們是可點(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í)通過(guò) ThemeRoller 應(yīng)用程序來(lái)修改的?？蚣軜邮街话绊懲庥^和感觀的屬性，只要是顏色、背景圖像、圖標(biāo)等。所以這些是 "安全的" 樣式，不會(huì)影響到插件的功能。這種分隔意味著開(kāi)發(fā)人員可以通過(guò)在 theme.css 文件中修改顏色和圖像來(lái)創(chuàng)建一個(gè)自定義的外觀和感觀。由于未來(lái)的插件或者 bug 修復(fù)將是可用的，這些不通過(guò)修改即可與主題一起使用。
由于框架樣式只覆蓋了外觀和感觀，所以還需要包含具體的插件樣式表，這些樣式表包括了所有額外的讓小部件具有功能性的結(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ì)所有的開(kāi)發(fā)人員創(chuàng)建 jQuery 插件，jQuery UI CSS 框架使得最終用戶更容易定制主題和使用插件。
下面列出了三種主題化 jQuery UI 插件的一般方法：
ui.theme.css 文件和一個(gè)包含了所有必需的背景圖像及圖標(biāo)精靈的 images 文件夾。這個(gè)方法是最早的創(chuàng)建和維護(hù)主題的方式，但是它對(duì) ThemeRoller 中提供的選項(xiàng)限制了自定義。ui.theme.css 文件，或者任意一個(gè)獨(dú)立插件的樣式表。例如，您可以很容易地調(diào)整所有按鈕的角半徑為不同于其他 UI 組件的值，或者使用自定義設(shè)置為圖標(biāo)精靈改變路徑。通過(guò)一點(diǎn)點(diǎn)的樣式范圍，您甚至可以在一個(gè) UI 中同時(shí)使用多個(gè)主題。為了易于維護(hù)，建議只更改 ui.theme.css 文件和圖像。