在《jQuery UI 中文參考手冊》中,jQuery UI 是建立在 jQuery JavaScript 函式庫上的一組使用者介面互動、特效、小工具及主題。無論您是建立高度互動的 Web 應用程式還是僅向窗體控制項新增一個日期選擇器,jQuery UI 都是一個完美的選擇。 jQuery UI 包含了許多維持狀態的小部件(Widget),因此,它與典型的 jQuery 外掛程式使用模式略有不同。
jQuery UI是一套JavaScript 函式庫,提供抽象化、可自訂主題的GUI控制與動畫效果。基於jQuery JavaScript庫,可用來建構互動式的網路應用程式。在2007年9月約翰·雷西格於jquery.com部落格裡的一篇文章裡正式公諸於世。最新的版本需要jQuery 2.1.1或更新的版本。
提示:在開始學習 jQuery UI之前,您需要具備HTML、CSS、JavaScript#基礎知識。
jQuery UI的優缺點:
優點:
#1、簡單易用,繼承jQuery 簡易使用特性,提供高度抽象接口,短期改善網站易用性。
2、輕巧快捷,元件間相對獨立,可按需加載,避免浪費頻寬拖慢網頁開啟速度。
3、標準先進,支援 WAI-ARIA,透過標準 XHTML 程式碼提供漸進增強,保證低階環境可訪問性。
4、強力支持,Google 為發布代碼提供 CDN 內容分發網路支援。
缺點:
1、程式碼不夠健壯:缺乏全面的測試案例,部分元件 Bugs 較多,無法達到企業級產品開發要求。
2、架構規劃不足:組件間 API 缺乏協調,缺乏配合使用協助。
3、控制較少:相對於 Dojo、YUI、Ext JS 等成熟產品,可用控制項較少,無法滿足複雜介面功能需求。
提示:我們的jQuery UI教學將協助您逐步學習如何掌握並使用jQuery UI,如果您有任何疑問,請前往PHP中文網jQuery UI社群提出你的問題,會有熱心網友為你解答。
jQuery UI功能
以1.9.0版本為例。
互動
拖曳(Draggable)–讓元素可以用滑鼠拖曳。
拖曳(Droppable)–讓控制項可以接受其他拖曳進來的元素。
調整大小(Resizable)–讓元素可以調整大小。
選取(Selectable)–提供進階的大量元素選擇功能。
排序(Sortable)–讓清單可以更容易排序。
控制項
jQuery UI的所有控制項都能自訂主題樣式。
手風琴式選單(Accordion)–如手風琴般可伸縮的控制。
自動完成(Autocomplete)–依照使用者的輸入來自動完成文字列。
按鈕(Button)–增強按鈕外觀,將單選與複選控制轉換成按鈕類型。
日期選擇器(Datepicker)–進階的日期選擇工具。
對話方塊(Dialog) –在頁面最上層顯示對話方塊。
選單(Menu) - 顯示多層次結構式的選單。
進度列(Progressbar) –動態與靜態的進度指示條。
滑動條(Slider)–完全可以自訂的滑動條與各種功能。
微調選擇器(Spinner) - 上下控制的數位微調輸入列。
頁籤(Tabs)–頁籤切換控件,可以內嵌或動態載入內容。
工具提示(Tooltip) - 彈出式提示框。
效果
顏色動畫(Color Animation)–產生顏色轉換的動畫效果。
切換Class、新增Class、移除Class、開關Class –讓頁面上元素樣式轉換時有動畫效果。
效果(Effects)–各種效果(顯示、下拉、爆炸、淡入等等)。
切換(Toggle)–切換效果開關。
隱藏、顯示 - 使用上述的效果。
工具
位置(Position) –根據另一個元素來設定目標元素的位置(對齊)。
本jQuery UI教學手冊涵蓋的內容
本jQuery UI教學手冊涵蓋所有jQuery UI初級到高級知識,包含了jQuery UI入門、jQuery UI主、jQuery UI零件庫等知識。
提示:本教學的每一章都包含了很多jQuery UI實例,您可以直接點擊 "運行實例" 按鈕在線查看結果或直接使用線上編輯器進行測試。這些範例將幫助您更好地理解和使用jQuery UI。
其它jQuery UI相關學習參考資源
除了本頁面右邊的知識拓展,也為大家精選了以下資源
最新章節
- 部件库(Widget Factory) 2016-10-19
- 定位(Position) 2016-10-19
- 颜色动画(Color Animation) 2016-10-19
- 转换 Class(Switch Class) 2016-10-19
- 切换 Class(Toggle Class) 2016-10-19
- 移除 Class(Remove Class) 2016-10-19
- 添加 Class(Add Class) 2016-10-19
- 切换(Toggle) 2016-10-19
相關課程
- Web前端開發極速入門 2021-12-10
- 最懂你的大前端課:HTML5/CSS3/ES6/NPM/Vue/...【原文】 2022-09-30
- Gulp入門影片教學 2022-04-18
- 兄弟連高洛峰CSS3影片教程 2022-04-20
- AngularJS開發Web應用程式基礎實例影片教學 2022-04-18
- Ajax全接觸 2022-04-13
- MUI框架基礎影片教學 2022-04-13
- 線上訓練班試聽課 2019-01-10