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

《各种效果的jqueryui(接口)简介》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、基本的鼠标互动：拖拽(draganddropping)、排序(sorting)、选择(selecting)、缩放(resizing)各种互动效果：手风琴式的折叠菜单(accordions)、日历(datepickers)、对话框(dialogs)、滑动条(sliders)、表格排序(tablesorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)第一部分：鼠标交互1.1Draggables:拖拽所需文件：ui.mouse.jsui.draggable.jsui.draggable.e

2、xt.js用法：文件载入后，可以拖拽class="block"的层$(document).ready(function(){   $(".block").draggable();});draggable(options)可以跟很多选项选项说明：http://docs.jquery.com/UI/Draggables/draggable#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html1.2Droppables所需要文件，

3、dragdropui.mouse.jsui.draggable.jsui.draggable.ext.jsui.droppable.jsui.droppable.ext.js用法：$(document).ready(function(){   $(".block").draggable({helper:'clone'});$(".drop").droppable({  accept:".block",  activeClass:'droppable-active',  hoverClass:'droppable-hover

4、',  drop:function(ev,ui){      $(this).append("
Dropped!");  }});});选项说明：http://docs.jquery.com/UI/Droppables/droppable#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html1.3　Sortables　排序所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable

5、.jsui.droppable.jsui.sortable.js用法：$(document).ready(function(){   $("#myList").sortable({});});dimensions文档http://jquery.com/plugins/project/dimensions选项说明：http://docs.jquery.com/UI/Sortables/sortable#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/

6、ui.sortable.html1.4Selectables选择所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.selectable.js用法：$(document).ready(function(){   $("#myList").selectable();});选项说明：http://docs.jquery.com/UI/Selectables/selectable#options选项实例：http://dev.jquery.c

7、om/view/trunk/plugins/ui/tests/selectable.html1.5　Resizables改变大小所需要的文件　，此例子需要几个css文件jquery.dimensions.jsui.mouse.jsui.resizable.js用法：$(document).ready(function(){   $("#example").resizable();});CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css选项说明：

8、http://docs.jquery.com/UI/Resizables/resizable#options选项实例：http://dev.jquery.com/view/trunk...s/ui.resizable.html第二部分：互动效果2.1Accordion折叠菜单所需要的文件:ui.acco