jQuery UI 教程

認(rèn)識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）使用相同的模式，所以，只要您學(xué)會使用其中一個，您就知道如何使用其他的小部件（Widget）。jQuery UI實(shí)際上是jQuery插件，專指由jQuery官方維護(hù)的UI方向的插件。

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

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

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

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

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

本教程包含：

1、jQuery UI入門

2、jQuery UI主題

3、jQuery UI部件庫

4、jQuery UI參考手冊

jQuery UI的特性及學(xué)習(xí)前的準(zhǔn)備：

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

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

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

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

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

《HTML 教程》

《CSS 教程》

《JavaScript 教程》

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

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

優(yōu)點(diǎn)：

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

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

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

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

缺點(diǎn)：

1、代碼不夠健壯：缺乏全面的測試用例，部分組件 Bugs 較多，不能達(dá)到企業(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上學(xué)習(xí)：

《HTML 教程》

《CSS 教程》

《HTML 5 教程》