jquery ui是jquery官方推出的配合jquery使用的用戶界面組件集合！包含了許多的界面操作功能，如我們常用的表格排序，拖拽，TAB選項卡，滾動條，相冊瀏覽，日歷控件，對話框等JS插件~~可以很方便的開發(fā)用戶界面上的功能，使得您的開發(fā)工作事半功倍~~不用寫繁瑣的JS代碼~
下載地址：http://ui./download
下載后會發(fā)現(xiàn)里面有很多的JS文件，也有DOME，您可以一一演示，現(xiàn)在，我介紹一些常用的UI庫的使用

基本的鼠標(biāo)互動：

拖拽(drag and dropping)、排序(sorting)、選擇(selecting)、縮放(resizing)

各種互動效果：

手風(fēng)琴式的折疊菜單(accordions)、日歷(date pickers)、對話框(dialogs)、滑動條

(sliders)、表格排序(table sorters)、頁簽(tabs)

放大鏡效果(magnifier)、陰影效果(shadow)

第一部分：鼠標(biāo)交互

1.1 Draggables:拖拽

所需文件：

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

用法：文件載入后，可以拖拽class = “block”的層

draggable(options)可以跟很多選項

選項說明：http://docs./UI/Draggables/draggable#options

選項實例：http://dev./view/trunk/plugins/ui/tests/draggable.html

1.2 Droppables

所需要文件，drag drop

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

ui.droppable.js

ui.droppable.ext.js

用法：

選項說明：http://docs./UI/Droppables/droppable#options

選項實例：http://dev./view/trunk/plugins/ui/tests/droppable.html

1.3　Sortables　排序

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.sortable.js

用法：

dimensions文檔http:///plugins/project/dimensions

選項說明：http://docs./UI/Sortables/sortable#options

選項實例：http://dev./view/trunk/plugins/ui/demos/ui.sortable.html

1.4 Selectables 選擇

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.selectable.js

用法：

選項說明：http://docs./UI/Selectables/selectable#options

選項實例：http://dev./view/trunk/plugins/ui/tests/selectable.html

1.5　Resizables改變大小

所需要的文件　，此例子需要幾個css文件

jquery.dimensions.js

ui.mouse.js

ui.resizable.js

用法：

CSS文件：http://dev./view/trunk/themes/flora/flora.all.css

選項說明：http://docs./UI/Resizables/resizable#options

選項實例：http://dev./view/trunk/plugins/ui/demos/ui.resizable.html

第二部分：互動效果

2.1 Accordion 折疊菜單

所需要的文件:

ui.accordion.js

jquery.dimensions.js

用法：

CSS文件：http://dev./view/trunk/themes/flora/flora.all.css

選項說明：http://docs./UI/Accordion/accordion#options

選項實例：http://dev./view/trunk/plugins/accordion/?p=1.1.1

2.2 dialogs 對話框

所需要的文件：

jquery.dimensions.js

ui.dialog.js

ui.resizable.js

ui.mouse.js

ui.draggable.js

用法：

CSS文件：http://dev./view/trunk/themes/flora/flora.all.css

選項說明：http://docs./UI/Dialog/dialog#options

選項實例：http://dev./view/trunk/plugins/ui/tests/dialog.html

2.3 sliders 滑動條

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.slider.js

用法：

CSS文件：http://dev./view/trunk/themes/flora/flora.all.css

選項說明：http://docs./UI/Slider/slider#options

選項實例：http://dev./view/trunk/plugins/ui/demos/ui.slider.html

2.4 Tablesorter表格排序

所需要的文件

ui.tablesorter.js

用法：

CSS文件：http://dev./view/trunk/themes/flora/flora.all.css

選項說明：http://docs./Plugins/Tablesorter/tablesorter#options

選項實例：http:///docs/#Demo

2.5 tabs頁簽(對IE支持不是很好)

所需要的文件

ui.tabs.js

用法：

CSS文件：http://dev./view/trunk/themes/flora/flora.all.css

選項說明：http://docs./UI/Tabs/tabs#initialoptions

選項實例：http://dev./view/trunk/plugins/ui/tests/tabs.html

tabs ext http:///jquery/tabs_3/rotate.html

第三部分：效果

3.1 Shadow 陰影

實例http://dev./view/trunk/plugins/ui/demos/ui.shadow.html

3.2 Magnifier 放大

實例http://dev./view/trunk/plugins/ui/demos/ui.magnifier.html