jQuery UI 教程

認識jQuery UI

jQuery UI是以 jQuery為基礎(chǔ)的開源JavaScript 網(wǎng)頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。我們可以直接用它來構(gòu)建具有很好交互性的web應(yīng)用程序。所有插件測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。

jQuery UI包含了許多維持狀態(tài)的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。jQuery UI實際上是jQuery插件，專指由jQuery官方維護的UI方向的插件。

jQuery UI 與 jquery 的主要區(qū)別是：

(1) jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

(2) jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴展性，設(shè)計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。

教程結(jié)構(gòu)概述：

本教程共由5個章節(jié)構(gòu)成，詳細講述了jQuery UI的基礎(chǔ)使用方法并附帶了大量可在線試運行的實例輔助您的學習，讓您輕松掌握jQuery UI。

本教程包含：

1、jQuery UI入門

2、jQuery UI主題

3、jQuery UI部件庫

4、jQuery UI參考手冊

jQuery UI的特性及學習前的準備：

jQuery UI 主要分為3個部分：交互、微件和效果庫。

交互交互部件是一些與鼠標交互相關(guān)的內(nèi)容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。

微件主要是一些界面的擴展，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，新版本的UI將包含更多的微件。

效果庫用于提供豐富的動畫效果，讓動畫不再局限于jQuery的animate()方法。

在您開始學習AngularJS之前，您應(yīng)該對以下知識有基本的了解：

《HTML 教程》

《CSS 教程》

《JavaScript 教程》

本教程全面介紹了jQuery UI如何改進HTML頁面展示，內(nèi)容包括jQuery UI的擴展特性：選項卡管理、折疊菜單、對話框、按鈕、進度條、滑塊、日歷、自動補全、拖放管理、選擇元素、縮放、元素調(diào)序以及新的視覺特效等。本教程講述了jQuery UI的所有功能。適合Web開發(fā)人員及設(shè)計人員閱讀。無論是jQuery UI的初學者還是有一定經(jīng)驗的開發(fā)人員，本教程都是極好的技術(shù)參考學習資料。

jQuery UI的優(yōu)缺點：

優(yōu)點：

1、簡單易用，繼承 jQuery 簡易使用特性，提供高度抽象接口，短期改善網(wǎng)站易用性。

2、輕便快捷，組件間相對獨立，可按需加載，避免浪費帶寬拖慢網(wǎng)頁打開速度。

3、標準先進，支持 WAI-ARIA，通過標準 XHTML 代碼提供漸進增強，保證低端環(huán)境可訪問性。

4、強力支持，Google 為發(fā)布代碼提供 CDN 內(nèi)容分發(fā)網(wǎng)絡(luò)支持。

缺點：

1、代碼不夠健壯：缺乏全面的測試用例，部分組件 Bugs 較多，不能達到企業(yè)級產(chǎn)品開發(fā)要求。

2、構(gòu)架規(guī)劃不足：組件間 API 缺乏協(xié)調(diào)，缺乏配合使用幫助。

3、控件較少：相對于 Dojo、YUI、Ext JS 等成熟產(chǎn)品，可用控件較少，無法滿足復(fù)雜界面功能要求。

相關(guān)網(wǎng)址：

1、jQuery UI 下載：請從 jQuery UI 網(wǎng)站上的 Download Builder（下載生成器） 頁面下載 jQuery UI 的副本。

2、jQuery UI 官網(wǎng)：http://jqueryui.com/

3、jQuery UI 中文網(wǎng)：http://www.jqueryui.org.cn/

除了本教程，您還可以在w3cschool上學習：

《HTML 教程》

《CSS 教程》

《HTML 5 教程》