| Widget | 核心能力 | 關鍵配置 |
|---|
| Accordion | 摺疊面板 | collapsible, active, animate, heightStyle |
| Autocomplete | 輸入建議/遠程搜索 | source, minLength, delay, select 事件 |
| Datepicker | 日期選擇器 | dateFormat, min/maxDate, changeMonth/Year, beforeShowDay |
| Dialog | 模態/非模態彈窗 | modal, autoOpen, buttons, draggable, resizable, position |
| Slider | 範圍滑塊 | min/max, step, range, values, slide/change 事件 |
| Tabs | 標籤頁切換 | active, event, collapsible, ajax 加載 |
| Progressbar | 進度條 | value, max, indeterminate |
| Spinner | 數字微調器 | min/max, step, numberFormat, culture |
| Menu/Tooltip | 菜單/提示框 | position, show/hide 動畫 |
3. Effects — 超越 animate() 的動畫引擎
- 核心效果：blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer。
- 顏色動畫：
.animate({backgroundColor: '#f00'}) 原生支持 RGB/HSV 插值。
- Class 切換動畫：
.addClass('highlight', 500)、.switchClass('old', 'new', 300)。
- Easing 函數：內置 swing/linear，配合
jquery.easing 插件擴展 30+ 緩動曲線。
主題系統
- ThemeRoller 可視化定製 60+ CSS 變量，生成
jquery-ui.theme.css + jquery-ui.structure.css。
- 圖標體系：256+ 圖標類 (ui-icon-*)，支持自定義 Sprite。
- CSS Scope：
.my-scope .ui-widget 隔離樣式，單頁多主題共存。
與 jQuery 核心區別
| 維度 | jQuery Core | jQuery UI |
|---|
| 定位 | DOM 操作、事件、Ajax、工具函數 | UI 組件、交互、動畫、主題 |
|---|
| 狀態 | 無狀態 (鏈式調用) | 有狀態 (Widget Factory) |
|---|
| 擴展點 | $.fn.plugin = fn | $.widget('ns.name', {prototype}) |
|---|
| 依賴 | 無 | jQuery Core + jQuery UI Core |
|---|
現代化替代與遷移建議
- 新項目優先考慮：Headless UI + Tailwind、Radix UI、MUI、Ant Design、PrimeVue/PrimeReact。
- 存量 jQuery UI 遷移策略：
1. 清單現有組件用法 → 2. 選擇目標組件庫對應組件 → 3. 逐頁重寫，保持視覺一致 → 4. 移除 jQuery UI 依賴。
- jQuery UI 1.13+ 僅維護安全補丁，不再添加新功能。
jQuery UI 見證了 jQuery 時代的組件化探索，其 API 設計哲學 (Widget Factory、選項合並、事件命名空間) 仍深刻影響現代組件庫架構。
copyright ©
萬盛學電腦網 all rights reserved