# jQuery UI 定制
jQuery UI 提供了多種定制方式。您已經看到下載生成器(Download Builder)如何定制一個值包含您所需選項的自定義版本,這里還提供了其他定制方式。
## jQuery UI 基礎:使用選項
jQuery UI 中的每個插件都有一個默認配置,默認配置值一般是根據最基本最常見的使用情況設置的。如果您想要讓某個插件設置成非默認值,您可以使用 "options" 重寫它的默認設置。選項是一組屬性,作為參數傳遞給 jQuery UI 小部件。例如,滑塊(slider)小部件具有 orientation 選項,該選項允許您指定滑塊是水平的還是垂直的。為了設置滑塊的該選項,您只需將它作為一個參數傳遞,如下所示:
```
$( "#mySliderDiv" ).slider({
orientation: "vertical"
});
```
您可以傳遞更多不同的選項,每個選項之間用逗號分隔:
```
$( "#mySliderDiv" ).slider({
orientation: "vertical",
min: 0,
max: 150,
value: 50
});
```
請記得選項需放在大括號 `{ }` 內。上面的實例只是一個簡單的講解,如需獲取整套 jQuery UI 小部件的詳細信息,請查看 [jQuery UI 實例](jqueryui-examples.html)。
## 視覺定制:設計一個 jQuery UI 主題
如果您想要設計自己的主題,jQuery UI 提供了一個非常完美的用于主題定制的應用程序,這就是 ThemeRoller。具體定制請訪問 [jQuery UI ThemeRoller](//jqueryui.com/themeroller/)。
ThemeRoller 為所有使用 jQuery UI 小部件設計的元素提供了一個自定義接口。當您調整左欄中的"levers",右欄中的小部件將根據您的設計進行顯示。ThemeRoller 的 Gallery 選項卡提供了一些與設計主題,與下載生成器(Download Builder)頁面提供的一樣。您可以基于這些主題做調整,或者直接下載。

## 下載主題
當您點擊 ThemeRoller 頁面中的 "Download theme" 按鈕,將跳轉到下載生成器(Download Builder)頁面,您的自定義主題會在主體下拉菜單中自動選中。您可以進一步配置下載包。一旦下載完成,您將看到 `example.html` 頁面使用了您自定義的主題。
**提示:** _如果您需要編輯您的主題,只需打開 CSS 文件,找到第 43 行,"To view and modify this theme, visit ...",該 url 即為在 ThemeRoller 中打開主題進行編輯的鏈接。_
- jQuery UI 基礎
- jQuery UI 簡介
- jQuery UI 下載
- jQuery UI 使用
- jQuery UI 定制
- jQuery UI 工作原理
- jQuery UI 主題
- jQuery UI 主題
- jQuery UI ThemeRoller
- jQuery UI CSS 框架 API
- jQuery UI 設計主題
- jQuery UI 部件庫
- jQuery UI 部件庫(Widget Factory)
- jQuery UI 通過部件庫(Widget Factory)擴展小部件
- jQuery UI 小部件(Widget)方法調用
- jQuery UI 為什么使用部件庫(Widget Factory)
- jQuery UI 如何使用部件庫(Widget Factory)
- jQuery UI 實例
- jQuery UI 實例
- jQuery UI 實例 - 拖動(Draggable)
- jQuery UI 實例 - 放置(Droppable)
- jQuery UI 實例 - 縮放(Resizable)
- jQuery UI 實例 - 選擇(Selectable)
- jQuery UI 實例 - 排序(Sortable)
- jQuery UI 實例 - 折疊面板(Accordion)
- jQuery UI 實例 - 自動完成(Autocomplete)
- jQuery UI 實例 - 按鈕(Button)
- jQuery UI 實例 - 日期選擇器(Datepicker)
- jQuery UI 實例 - 對話框(Dialog)
- jQuery UI 實例 - 菜單(Menu)
- jQuery UI 實例 - 進度條(Progressbar)
- jQuery UI 實例 - 滑塊(Slider)
- jQuery UI 實例 - 旋轉器(Spinner)
- jQuery UI 實例 - 標簽頁(Tabs)
- jQuery UI 實例 - 工具提示框(Tooltip)
- jQuery UI 實例 - 特效(Effect)
- jQuery UI 實例 - 顯示(Show)
- jQuery UI 實例 - 隱藏(Hide)
- jQuery UI 實例 - 切換(Toggle)
- jQuery UI 實例 - 添加 Class(Add Class)
- jQuery UI 實例 - 移除 Class(Remove Class)
- jQuery UI 實例 - 切換 Class(Toggle Class)
- jQuery UI 實例 - 轉換 Class(Switch Class)
- jQuery UI 實例 - 顏色動畫(Color Animation)
- jQuery UI 實例 - 定位(Position)
- jQuery UI 實例 - 部件庫(Widget Factory)
- jQuery UI API 參考
- jQuery UI API 類別 - 特效(Effects)
- jQuery UI API - .addClass()
- jQuery UI API - 百葉窗特效(Blind Effect)
- jQuery UI API - 反彈特效(Bounce Effect)
- jQuery UI API - 剪輯特效(Clip Effect)
- jQuery UI API - 顏色動畫(Color Animation)
- jQuery UI API - 降落特效(Drop Effect)
- jQuery UI API - Easings
- jQuery UI API - .effect()
- jQuery UI API - 爆炸特效(Explode Effect)
- jQuery UI API - 淡入淡出特效(Fade Effect)
- jQuery UI API - 折疊特效(Fold Effect)
- jQuery UI API - .hide()
- jQuery UI API - 突出特效(Highlight Effect)
- jQuery UI API - 膨脹特效(Puff Effect)
- jQuery UI API - 跳動特效(Pulsate Effect)
- jQuery UI API - .removeClass()
- jQuery UI API - 縮放特效(Scale Effect)
- jQuery UI API - 震動特效(Shake Effect)
- jQuery UI API - .show()
- jQuery UI API - 尺寸特效(Size Effect)
- jQuery UI API - 滑動特效(Slide Effect)
- jQuery UI API - .switchClass()
- jQuery UI API - .toggle()
- jQuery UI API - .toggleClass()
- jQuery UI API - 轉移特效(Transfer Effect)
- jQuery UI API 類別 - 特效核心(Effects Core)
- jQuery UI API - 顏色動畫(Color Animation)
- jQuery UI API 類別 - 交互(Interactions)
- jQuery UI API - 可拖拽小部件(Draggable Widget)
- jQuery UI API - 可放置小部件(Droppable Widget)
- jQuery UI API - 鼠標交互(Mouse Interaction)
- jQuery UI API - 可調整尺寸小部件(Resizable Widget)
- jQuery UI API - 可選擇小部件(Selectable Widget)
- jQuery UI API - 可排序小部件(Sortable Widget)
- jQuery UI API 類別 - 方法重載(Method Overrides)
- jQuery UI API - .focus()
- jQuery UI API - .position()
- jQuery UI API 類別 - 方法(Methods)
- jQuery UI API - .disableSelection()
- jQuery UI API - .enableSelection()
- jQuery UI API - .removeUniqueId()
- jQuery UI API - .scrollParent()
- jQuery UI API - .uniqueId()
- jQuery UI API - .zIndex()
- jQuery UI API 類別 - 選擇器(Selectors)
- jQuery UI API - :data() Selector
- jQuery UI API - :focusable Selector
- jQuery UI API - :tabbable Selector
- jQuery UI API 類別 - 主題(Theming)
- jQuery UI API - CSS 框架(CSS Framework)
- jQuery UI API - 圖標(Icons)
- jQuery UI API - 堆疊元素(Stacking Elements)
- jQuery UI API 類別 - UI 核心(UI Core)
- jQuery UI API 類別 - 實用工具(Utilities)
- jQuery UI API - 部件庫(Widget Factory)
- jQuery UI API - 插件橋(Widget Plugin Bridge)
- jQuery UI API 類別 - 小部件(Widgets)
- jQuery UI API - 折疊面板部件(Accordion Widget)
- jQuery UI API - 自動完成部件(Autocomplete Widget)
- jQuery UI API - 按鈕部件(Button Widget)
- jQuery UI API - 日期選擇器部件(Datepicker Widget)
- jQuery UI API - 對話框部件(Dialog Widget)
- jQuery UI API - 菜單部件(Menu Widget)
- jQuery UI API - 進度條部件(Progressbar Widget)
- jQuery UI API - 滑塊部件(Slider Widget)
- jQuery UI API - 旋轉器部件(Spinner Widget)
- jQuery UI API - 標簽頁部件(Tabs Widget)
- jQuery UI API - 工具提示框部件(Tooltip Widget)
- jQuery EasyUI 簡介
- jQuery EasyUI 應用
- jQuery EasyUI 應用 - 創建 CRUD 應用
- jQuery EasyUI 應用 - 創建 CRUD 數據網格(DataGrid)
- jQuery EasyUI 應用 - 創建展開行明細編輯表單的 CRUD 應用
- jQuery EasyUI 應用 - 創建 RSS Feed 閱讀器
- jQuery EasyUI 拖放
- jQuery EasyUI 拖放 - 基本的拖動和放置
- jQuery EasyUI 拖放 - 創建拖放的購物車
- jQuery EasyUI 拖放 - 創建學校課程表
- jQuery EasyUI 菜單與按鈕
- jQuery EasyUI 菜單與按鈕 - 創建簡單的菜單
- jQuery EasyUI 菜單與按鈕 - 創建鏈接按鈕(Link Button)
- jQuery EasyUI 菜單與按鈕 - 創建菜單按鈕(Menu Button)
- jQuery EasyUI 菜單與按鈕 - 創建分割按鈕(Split Button)
- jQuery EasyUI 布局
- jQuery EasyUI 布局 - 為網頁創建邊框布局
- jQuery EasyUI 布局 - 在面板中創建復雜布局
- jQuery EasyUI 布局 - 創建折疊面板
- jQuery EasyUI 布局 - 創建標簽頁(Tabs)
- jQuery EasyUI 布局 - 動態添加標簽頁(Tabs)
- jQuery EasyUI 布局 - 添加自動播放標簽頁(Tabs)
- jQuery EasyUI 布局 - 創建 XP 風格左側面板
- jQuery EasyUI 數據網格
- jQuery EasyUI 數據網格 - 轉換 HTML 表格為數據網格
- jQuery EasyUI 數據網格 - 取得選中行數據
- jQuery EasyUI 數據網格 - 添加查詢功能
- jQuery EasyUI 數據網格 - 添加工具欄
- jQuery EasyUI 數據網格 - 創建復雜工具欄
- jQuery EasyUI 數據網格 - 設置凍結列
- jQuery EasyUI 數據網格 - 動態改變列
- jQuery EasyUI 數據網格 - 格式化列
- jQuery EasyUI 數據網格 - 設置排序
- jQuery EasyUI 數據網格 - 自定義排序
- jQuery EasyUI 數據網格 - 創建列組合
- jQuery EasyUI 數據網格 - 添加復選框
- jQuery EasyUI 數據網格 - 自定義分頁
- jQuery EasyUI 數據網格 - 啟用行內編輯
- jQuery EasyUI 數據網格 - 擴展編輯器
- jQuery EasyUI 數據網格 - 列運算
- jQuery EasyUI 數據網格 - 合并單元格
- jQuery EasyUI 數據網格 - 創建自定義視圖
- jQuery EasyUI 數據網格 - 創建頁腳摘要
- jQuery EasyUI 數據網格 - 條件設置行背景顏色
- jQuery EasyUI 數據網格 - 創建屬性網格
- jQuery EasyUI 數據網格 - 擴展行顯示細節
- jQuery EasyUI 數據網格 - 創建子網格
- jQuery EasyUI 數據網格 - 使用虛擬滾動視圖顯示海量數據
- jQuery EasyUI 數據網格 - 添加分頁組件
- jQuery EasyUI 窗口
- jQuery EasyUI 窗口 - 創建簡單窗口
- jQuery EasyUI 窗口 - 自定義窗口工具欄
- jQuery EasyUI 窗口 - 窗口與布局
- jQuery EasyUI 窗口 - 創建對話框
- jQuery EasyUI 窗口 - 自定義帶有工具條和按鈕的對話框
- jQuery EasyUI 樹形菜單
- jQuery EasyUI 樹形菜單 - 使用標記創建樹形菜單
- jQuery EasyUI 樹形菜單 - 創建異步樹形菜單
- jQuery EasyUI 樹形菜單 - 樹形菜單添加節點
- jQuery EasyUI 樹形菜單 - 創建帶復選框的樹形菜單
- jQuery EasyUI 樹形菜單 - 樹形菜單拖放控制
- jQuery EasyUI 樹形菜單 - 樹形菜單加載父/子節點
- jQuery EasyUI 樹形菜單 - 創建基礎樹形網格
- jQuery EasyUI 樹形菜單 - 創建復雜樹形網格
- jQuery EasyUI 樹形菜單 - 樹形網格動態加載
- jQuery EasyUI 樹形菜單 - 樹形網格添加分頁
- jQuery EasyUI 樹形菜單 - 樹形網格惰性加載節點
- jQuery EasyUI 表單
- jQuery EasyUI 表單 - 創建異步提交表單
- jQuery EasyUI 表單 - 表單驗證
- jQuery EasyUI 表單 - 創建樹形下拉框
- jQuery EasyUI 表單 - 格式化下拉框
- jQuery EasyUI 表單 - 過濾下拉數據網格
- jQuery EasyUI 插件
- jQuery EasyUI 擴展
- 免責聲明