Latest web development tutorials

jQuery UI 主題

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

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

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

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

我們鼓勵所有的開發人員創建jQuery 插件,jQuery UI CSS 框架使得最終用戶更容易定制主題和使用插件。

主題化

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

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

使用ThemeRoller、jQuery UI CSS 框架,以及設計自定義主題