jQuery UI入门手册，新手必备。

先说明一下效果：

基本的鼠标互动：

拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)

各种互动效果：

手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)

第一节：鼠标的交互应用

1.1 Draggables:拖拽

所需文件：

ui.mouse.js
ui.draggable.js
ui.draggable.ext.js

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

docs.jquery.com/UI/Draggables/draggable#options

1.2 Droppables

所需要文件，drag drop

ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
ui.droppable.js
ui.droppable.ext.js

用法：

选项说明：#options
选项实例：

1.3　Sortables　排序

所需要的文件

jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js

用法：

dimensions文档
选项说明：#options
选项实例：

1.4 Selectables 选择

所需要的文件

jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js

用法：

选项说明：#options
选项实例：

1.5　Resizables改变大小

所需要的文件　，此例子需要几个css文件

jquery.dimensions.js
ui.mouse.js
ui.resizable.js

用法：

CSS文件：
选项说明：#options
选项实例：

第二节：互动效果

2.1 Accordion 折叠菜单

所需要的文件:

ui.accordion.js
jquery.dimensions.js

用法：

CSS文件：
选项说明：#options
选项实例：?p=1.1.1

2.2 dialogs 对话框

所需要的文件：

jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js

用法：

CSS文件：
选项说明：#options
选项实例：

2.3 sliders 滑动条

所需要的文件

jquery.dimensions.js
ui.mouse.js
ui.slider.js

用法：

CSS文件：
选项说明：#options
选项实例：

2.4 Tablesorter表格排序

所需要的文件

ui.tablesorter.js

用法：

CSS文件：
选项说明：#options
选项实例：#Demo

2.5 tabs页签(对IE支持不是很好)

所需要的文件
ui.tabs.js

用法：

CSS文件：
选项说明：#initialoptions
选项实例：
tabs ext

还可以在这里了解jquery ui tabs 即标签页插件

您可能感兴趣的文章：
jquery ui 中文手册
jQuery UI 教程之二 ——jquery ui dialog的使用
jQuery iPhone UI
jQuery UI 教程之一 ——入门
13个绚丽的Jquery 界面设计网站推荐
js注册验证代码大全
jQuery UI 教程之三 ——jquery ui datepicker的使用
jquery 新手学习常见问题解决方法
jQuery UI入门手册
嵌入式JavaScript框架 jQTouch