jQuery UI 教程

認(rèn)識(shí)jQuery UI

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

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

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

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

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

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

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

本教程包含：

1、jQuery UI入門(mén)

2、jQuery UI主題

3、jQuery UI部件庫(kù)

4、jQuery UI參考手冊(cè)

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

jQuery UI 主要分為3個(gè)部分：交互、微件和效果庫(kù)。

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

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

效果庫(kù)用于提供豐富的動(dòng)畫(huà)效果，讓動(dòng)畫(huà)不再局限于jQuery的animate()方法。

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

《HTML 教程》

《CSS 教程》

《JavaScript 教程》

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

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

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

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

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

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

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

缺點(diǎn)：

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

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

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

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

1、jQuery UI 下載：請(qǐng)從 jQuery UI 網(wǎng)站上的 Download Builder（下載生成器） 頁(yè)面下載 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 教程》