各种效果的jqueryui(接口)简介

1、基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)各种互动效果：手风琴式的折叠菜单 (accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表 格排序(table sorters) >页签(tabs卜放大镜效果(magnifier)、阴影效果(shadow)第一部分：鼠标交互1.1 Draggables:拖拽所需文件：ui.mouse.jsui.draggable.jsui.draggable.ext.js用法：文件载入后，可以拖拽class =

2、"block"的层$(docume nt).ready(fu nction()$(".block").draggable(););draggable(optio ns)可以跟很多选项选项说明：http:/docs.jquery.eom/UI/Draggables/draggable#opti ons选项实例： un k/plug in s/ui/tests/draggable.html1.2 Droppables所需要文件，drag dropui.mouse.jsui.draggable.jsui.draggable.ext.jsui.droppable

3、.jsui.droppable.ext.js用法：$(docume nt).ready(fu nction()$(".block").draggable(helper: 'clo ne');$(".drop").droppable(accept: ".block",activeClass: 'droppable-active',hoverClass: 'droppable-hover',drop: fun cti on( ev, ui) $(this) .ap pe nd("&

4、lt;br>Dropped!");)；选项说明:选项实例:)； ons nk/plugi ns/ui/tests/droppable.html1.3 Sortables 排序所需要的文件jquery.dime nsion s.js ui.mouse.js ui.draggable.jsui.droppable.jsui.sortable.js用法：$(docume nt).ready(fu nction()$("#myList").sortable();)；dimensions 文档 选项说明：http:/docs.jquery.eom/UI/Sortabl

5、es/sortable#opti ons选项实例： nk/plugi ns/ui/demos/ui.sortable.html1.4 Selectables 选择所需要的文件jquery.dime nsion s.jsui.mouse.jsui.draggable.jsui.droppable.jsui.selectable.js用法：$(docume nt).ready(fu nction()$("#myList").selectable();)；选项说明：http:/docs.jquery.eom/UI/Selectables/selectable#opti ons选项

6、实例： nk/plugi ns/ui/tests/selectable.html1.5 Resizables 改变大小所需要的文件，此例子需要几个css文件jquery.dime nsion s.jsui.mouse.jsui.resizable.js用法：$(docume nt).ready(fu nction()$("#example").resizable();)；CSS 文件： 选项说明：http:/docs.jquery.eom/UI/Resizables/resizable#opti ons 选项实例： unk . s/ui.resizable.html 第二部

7、分：互动效果2.1 Accordion 折叠菜单所需要的文件：ui.accord ion.jsjquery.dime nsion s.js用法：$(docume nt).ready(fu nction()$("#example").accord ion();)；CSS 文件： 选项说明： ion/accord ion #opti ons选项实例： un k/plug in s/accord ion/?p= dialogs 对话框所需要的文件：jquery.dime nsion s.jsui.dialog.jsui.resizable.jsui.mouse.j

8、sui.draggable.js用法：$(docume nt).ready(fu nction()$("#example").dialog(););CSS 文件： ons选项实例： nk/plugi ns/ui/tests/dialog.html2.3 sliders 滑动条所需要的文件jquery.dime nsion s.jsui.mouse.jsui.slider.js用法：$(docume nt).ready(fu nction()$("#example").slider(););CSS 文件：选项说明： ons选项实例： nk/plugi ns

9、/ui/demos/ui.slider.html2.4 Tablesorter 表格排序所需要的文件ui.tablesorter.js用法：$(docume nt).ready(fu nction()$("#example").tablesorter(sortList:0,0,2,1, widgets: 'zebra'););CSS 文件： http:/devjquery com/view/trunk/themes/flora/flora all css选项说明： ns/Tablesorter/tablesorter#opti ons 选项实例：2.5 tabs页签(对IE支持不是很好)所需要的文件ui.tabs.js用法：$(docume nt).ready(fu nction()$("#example > ul").tabs(););CSS 文件：