《各种效果的jqueryui接口简介.docx》由会员分享，可在线阅读，更多相关《各种效果的jqueryui接口简介.docx（4页珍藏版）》请在三一文库上搜索。
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"的层$(document).ready(function()$(".block").draggable(););draggable(options)可以跟很多选项选项说明:http:/docs.jquery.cOm/UI/Draggables/draggable#options选项实例：1.2 Droppables所需要文件，drag dropui.mouse.jsui.draggable.jsui.draggable.ext.jsui.droppable.jsui.droppable.ext.js用法：$(document).rea
3、dy(function()$(".block").draggable(helper: 'clone');$(".drop").droppable(accept: ".block",activeClass: 'droppable-active',hoverClass: 'droppable-hover',drop: function(ev, ui) $(this).append("<br>Dropped!”);););选项说明:选项实例：1.3 Sortables 排
4、序所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.sortable.js用法：$(document).ready(function()($("#myList").sortable(););dimensions 文档 选项说明:http:/docs.jquery.cOm/UI/Sortables/sortable#options选项实例：1.4 Selectables 选择所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.dr
5、oppable.jsui.selectable.js用法：$(document).ready(function()$("#myList").selectable(););选项说明:http:/docs.jquery.cOm/UI/Selectables/selectable#options选项实例：1.5 Resizables 改变大小所需要的文件，此例子需要几个css文件jquery.dimensions.jsui.mouse.jsui.resizable.js用法：$(document).ready(function()$("#example").r
6、esizable(););CSS 文件:选项说明:http:/docs.jquery.cOm/UI/Resizables/resizable#options选项实例： . s/ui.resizable.html第二部分：互动效果2.1 Accordion 折叠菜单所需要的文件：ui.accordion.jsjquery.dimensions.js用法：$(document).ready(function()$("#example").accordion(););CSS 文件: 选项说明:http:/docs.jquery.eom/UI/Accordion/accordion
7、#options 选项实例： 2.2 dialogs 对话框所需要的文件：jquery.dimensions.jsui.dialog.jsui.resizable.jsui.mouse.jsui.draggable.js用法：$(document).ready(function()($("#example").dialog();)；CSS 文件:选项说明:选项实例：2.3 sliders 滑动条所需要的文件jquery.dimensions.jsui.mouse.jsui.slider.js用法：$(document).ready(function()($("#e
8、xample").slider();)；CSS 文件:选项说明:选项实例：2.4 Tablesorter 表格排序所需要的文件ui.tablesorter.js用法：$(document).ready(function()($("#example").tablesorter(sortList:0,0,2,1, widgets: 'zebra');)；CSS 文件: 选项说明:2.5 tabs页签(对IE支持不是很好)所需要的文件ui.tabs.js用法：$(document).ready(function()$("#example > ul").tabs(););CSS 文件:选项说明:http:/docs.jquery.Com/UI/Tabs/tabs#initialoptions选项实例：tabs ext http:/stilbuero.de/jquery/tabs 3/rotate.html第三部分：效果3.1 Shadow 阴影实例 3.2 Magnifier 放大实例