Jquery ui 1.7的各种效果接口介绍

基本的鼠标互动：

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

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

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

$(document).ready(function(){
$(".block").draggable();
});

draggable(options) 可以跟很多选项
选项说明：http://jqueryui.com/demos/draggable/#options
选项实例：http://jqueryui.com/demos/draggable/default.html

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!");
}
});
});

选项说明：http://jqueryui.com/demos/droppable/#options
选项实例：http://jqueryui.com/demos/droppable/default.html

1.3 Sortables 排序
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用法：

$(document).ready(function(){
$("#myList").sortable({});
});

选项说明：http://jqueryui.com/demos/sortable/#options
选项实例：http://jqueryui.com/demos/sortable/default.html

1.4 Selectables 选择
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法：

$(document).ready(function(){
$("#myList").selectable();
});

选项说明：http://jqueryui.com/demos/selectable/#options
选项实例：http://jqueryui.com/demos/selectable/default.html

1.5 Resizables改变大小
所需要的文件 ，此例子需要几个css文件
jquery.dimensions.js
ui.mouse.js
ui.resizable.js
用法：

$(document).ready(function(){
$("#example").resizable();
});

选项说明：http://jqueryui.com/demos/resizable/#options
选项实例：http://jqueryui.com/demos/resizable/default.html

第二部分：互动效果
2.1 Accordion 折叠菜单
所需要的文件:
ui.accordion.js
jquery.dimensions.js
用法：

   1. $(document).ready(function(){
   2. $("#example").accordion();
   3. });

选项说明：http://jqueryui.com/demos/accordion/#options
选项实例：http://jqueryui.com/demos/accordion/default.html
2.2 dialogs 对话框
所需要的文件：
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js

用法：

$(document).ready(function(){
$("#example").dialog();
});

选项说明：http://jqueryui.com/demos/dialog/#options
选项实例：http://jqueryui.com/demos/dialog/default.html

2.3 sliders 滑动条
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.slider.js

用法：

 $(document).ready(function(){
$("#example").slider();
});

选项说明：http://jqueryui.com/demos/slider/#options
选项实例：http://jqueryui.com/demos/slider/default.html

2.4 Tablesorter表格排序
所需要的文件
ui.tablesorter.js

用法：

$(document).ready(function(){
$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});

选项说明：http://tablesorter.com/docs/#Configuration
选项实例：http://tablesorter.com/docs/#demo

2.5 tabs页签(对IE支持不是很好)
所需要的文件
ui.tabs.js
用法：

$(document).ready(function(){
$("#example > ul").tabs();
});

选项说明：http://jqueryui.com/demos/tabs//#options
选项实例：http://jqueryui.com/demos/tabs/default.html
tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

Tags: jquery ui, jquery插件