基本的鼠标互动： 拖拽(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"的层 $(document).ready(function(){     $(".block").draggable(); }); draggable(options)可以跟很多选项 选项说明：[url=http://docs.jquery.com/UI/Draggables/draggable#options]http://docs.jquery.com/UI/Draggables/draggable#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html]http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html[/url] 1.2 Droppables 所需要文件，drag drop ui.mouse.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js 用法： $(document).ready(function(){     $(".block").draggable({helper: 'clone'}); $(".drop").droppable({    accept: ".block",    activeClass: 'droppable-active',    hoverClass: 'droppable-hover',    drop: function(ev, ui) {        $(this).append("<br>Dropped!");    } }); }); 选项说明：[url=http://docs.jquery.com/UI/Droppables/droppable#options]http://docs.jquery.com/UI/Droppables/droppable#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html]http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html[/url] 1.3　Sortables　排序 所需要的文件 jquery.dimensions.js ui.mouse.js ui.draggable.js ui.droppable.js ui.sortable.js 用法： $(document).ready(function(){     $("#myList").sortable({}); }); dimensions文档[url=http://jquery.com/plugins/project/dimensions]http://jquery.com/plugins/project/dimensions[/url] 选项说明：[url=http://docs.jquery.com/UI/Sortables/sortable#options]http://docs.jquery.com/UI/Sortables/sortable#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html]http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html[/url] 1.4 Selectables 选择 所需要的文件 jquery.dimensions.js ui.mouse.js ui.draggable.js ui.droppable.js ui.selectable.js 用法： $(document).ready(function(){     $("#myList").selectable(); }); 选项说明：[url=http://docs.jquery.com/UI/Selectables/selectable#options]http://docs.jquery.com/UI/Selectables/selectable#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html]http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html[/url] 1.5　Resizables改变大小 所需要的文件　，此例子需要几个css文件 jquery.dimensions.js ui.mouse.js ui.resizable.js 用法： $(document).ready(function(){     $("#example").resizable(); }); CSS文件：[url=http://dev.jquery.com/view/trunk/themes/flora/flora.all.css]http://dev.jquery.com/view/trunk/themes/flora/flora.all.css[/url] 选项说明：[url=http://docs.jquery.com/UI/Resizables/resizable#options]http://docs.jquery.com/UI/Resizables/resizable#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk]http://dev.jquery.com/view/trunk[/url] ... s/ui.resizable.html 第二部分：互动效果 2.1 Accordion 折叠菜单 所需要的文件: ui.accordion.js jquery.dimensions.js 用法： $(document).ready(function(){     $("#example").accordion(); }); CSS文件：[url=http://dev.jquery.com/view/trunk/themes/flora/flora.all.css]http://dev.jquery.com/view/trunk/themes/flora/flora.all.css[/url] 选项说明：[url=http://docs.jquery.com/UI/Accordion/accordion#options]http://docs.jquery.com/UI/Accordion/accordion#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1]http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1[/url] 2.2 dialogs 对话框 所需要的文件： jquery.dimensions.js ui.dialog.js ui.resizable.js ui.mouse.js ui.draggable.js 用法： $(document).ready(function(){     $("#example").dialog(); }); CSS文件：[url=http://dev.jquery.com/view/trunk/themes/flora/flora.all.css]http://dev.jquery.com/view/trunk/themes/flora/flora.all.css[/url] 选项说明：[url=http://docs.jquery.com/UI/Dialog/dialog#options]http://docs.jquery.com/UI/Dialog/dialog#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html]http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html[/url] 2.3 sliders 滑动条 所需要的文件 jquery.dimensions.js ui.mouse.js ui.slider.js 用法： $(document).ready(function(){     $("#example").slider(); }); CSS文件：[url=http://dev.jquery.com/view/trunk/themes/flora/flora.all.css]http://dev.jquery.com/view/trunk/themes/flora/flora.all.css[/url] 选项说明：[url=http://docs.jquery.com/UI/Slider/slider#options]http://docs.jquery.com/UI/Slider/slider#options[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html]http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html[/url] 2.4 Tablesorter表格排序 所需要的文件 ui.tablesorter.js 用法： $(document).ready(function(){     $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']}); }); CSS文件：[url=http://dev.jquery.com/view/trunk/themes/flora/flora.all.css]http://dev.jquery.com/view/trunk/themes/flora/flora.all.css[/url] 选项说明：[url=http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options]http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options[/url] 选项实例：[url=http://tablesorter.com/docs/#Demo]http://tablesorter.com/docs/#Demo[/url] 2.5 tabs页签(对IE支持不是很好) 所需要的文件 ui.tabs.js 用法： $(document).ready(function(){     $("#example > ul").tabs(); }); CSS文件：[url=http://dev.jquery.com/view/trunk/themes/flora/flora.all.css]http://dev.jquery.com/view/trunk/themes/flora/flora.all.css[/url] 选项说明：[url=http://docs.jquery.com/UI/Tabs/tabs#initialoptions]http://docs.jquery.com/UI/Tabs/tabs#initialoptions[/url] 选项实例：[url=http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html]http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html[/url] tabs ext [url=http://stilbuero.de/jquery/tabs_3/rotate.html]http://stilbuero.de/jquery/tabs_3/rotate.html[/url] 第三部分：效果 3.1 Shadow 阴影 实例[url=http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html]http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html[/url] 3.2 Magnifier 放大 实例[url=http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html]http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html[/url]