jQuery UI 教程
-
jQuery UI 實(shí)例
-
拖動(dòng)（Draggable）
-
放置（Droppable）
-
縮放（Resizable）
-
選擇（Selectable）
-
排序（Sortable）
-
折疊面板（Accordion）
-
自動(dòng)完成（Autocomplete）
-
按鈕（Button）
-
日期選擇器（Datepicker）
-
對話框（Dialog）
-
菜單（Menu）
-
進(jìn)度條（Progressbar）
-
滑塊（Slider）
-
旋轉(zhuǎn)器（Spinner）
-
標(biāo)簽頁（Tabs）
-
工具提示框（Tooltip）
-
特效（Effect）
-
顯示（Show）
-
隱藏（Hide）
-
切換（Toggle）
-
添加 Class（Add Class）
-
移除 Class（Remove Class）
-
切換 Class（Toggle Class）
-
轉(zhuǎn)換 Class（Switch Class）
-
顏色動(dòng)畫
-
定位（Position）
-
部件庫（Widget Factory）
jQuery UI ThemeRoller
ThemeRoller 簡介
ThemeRoller 是一個(gè) Web 應(yīng)用程序，為 jQuery UI 設(shè)計(jì)和下載自定義主題提供了直觀的界面。您可以訪問 jQuery UI ThemeRoller 進(jìn)行主題定制。
jQuery UI ThemeRoller 是由波士頓的 Filament Group, Inc 設(shè)計(jì)和開發(fā)的。
ThemeRoller 界面
ThemeRoller 的界面分為不同面板，各面板分別是全局字體和圓角半徑設(shè)置、小部件容器樣式、可點(diǎn)擊元素的互動(dòng)狀態(tài)，及覆蓋和陰影的各種樣式。這些面板允許配置各種 CSS 屬性，比如字體尺寸、顏色、粗細(xì)、背景顏色和紋理、邊框顏色、文本顏色、圖標(biāo)顏色、圓角半徑，等等。
主題館（Gallery）：預(yù)先設(shè)計(jì)主題
ThemeRoller 主題可以通過永久鏈接 URL 進(jìn)行查看，它包含一些預(yù)先設(shè)計(jì)的主題可供選擇。主題館（Gallery）可以通過位于應(yīng)用程序界面頂端的標(biāo)簽欄進(jìn)行訪問。從主題館（Gallery）中，您可以預(yù)覽和下載主題，甚至可以選擇一個(gè)主題，然后切換到 "Roll Your Own" 標(biāo)簽頁進(jìn)行調(diào)整。
下載主題
當(dāng)您設(shè)計(jì)完主題后，您可以下載主題以便在項(xiàng)目中進(jìn)行使用。ThemeRoller 在頂部有一個(gè) "Download theme（下載主題）" 按鈕，可以生成一個(gè) zip 壓縮包，包含了所有的主題相關(guān)文件。下載文件中的圖像是按照您的規(guī)格進(jìn)行生成的，并保存為高質(zhì)量的 PNG 文件。
您的主題將包含圖像和 CSS，組成了 jQuery UI CSS 框架的自定義版本，包含了所有插件的圖像和 CSS。
在項(xiàng)目中按照下載的主題
一旦下載了主題，解壓縮后，您將看到一個(gè)名為 themes 的文件夾。該文件夾包括了主題所需的 CSS 和圖像。復(fù)制主題文件夾到您的項(xiàng)目中，并在頁面中鏈接 themes/all.css 文件。
創(chuàng)建自定義的 "ThemeRoller-Ready" 組件
ThemeRoller 生成了一個(gè) jQuery UI CSS 框架的自定義版本，用于開發(fā)您自己的 ThemeRoller-ready jQuery 組件。通過這個(gè)框架生成的類被設(shè)計(jì)來提供通用的用戶界面的設(shè)計(jì)情況，包括狀態(tài)、圖標(biāo)以及各種輔助類。
如需了解更多 jQuery UI CSS 框架的開發(fā)信息，請查看 主題化 API 文檔。