各种效果的jquery ui(接口)介绍 ----摘自博客园Leo_wlCnBlogs
时间：2010-08-19 来源：超越自己
001 使用jquery的朋友不得不看的,jquery ui接口，提升jquery的效率
002 基本的鼠标互动：
003 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
004
005 各种互动效果：
006 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)
007
008 第一部分：鼠标交互
009 1.1 Draggables:拖拽
010 所需文件：
011 ui.mouse.js
012 ui.draggable.js
013 ui.draggable.ext.js
014
015 用法：文件载入后，可以拖拽class = "block"的层
016 $(document).ready(function(){
017 $(".block").draggable();
018 });
019
020 draggable(options)可以跟很多选项
021 选项说明：http://docs.jquery.com/UI/Draggables/draggable#options
022 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html
023
024 1.2 Droppables
025 所需要文件，drag drop
026 ui.mouse.js
027 ui.draggable.js
028 ui.draggable.ext.js
029 ui.droppable.js
030 ui.droppable.ext.js
031 用法：
032 $(document).ready(function(){
033 $(".block").draggable({helper: 'clone'});
034 $(".drop").droppable({
035 accept: ".block",
036 activeClass: 'droppable-active',
037 hoverClass: 'droppable-hover',
038 drop: function(ev, ui) {
039 $(this).append("<br>Dropped!");
040 }
041 });
042 });
043 选项说明：http://docs.jquery.com/UI/Droppables/droppable#options
044 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html
045
046 1.3 Sortables 排序
047 所需要的文件
048 jquery.dimensions.js
049 ui.mouse.js
050 ui.draggable.js
051 ui.droppable.js
052 ui.sortable.js
053 用法：
054 $(document).ready(function(){
055 $("#myList").sortable({});
056 });
057 dimensions文档http://jquery.com/plugins/project/dimensions
058 选项说明：http://docs.jquery.com/UI/Sortables/sortable#options
059 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html
060
061 1.4 Selectables 选择
062 所需要的文件
063 jquery.dimensions.js
064 ui.mouse.js
065 ui.draggable.js
066 ui.droppable.js
067 ui.selectable.js
068 用法：
069 $(document).ready(function(){
070 $("#myList").selectable();
071 });
072 选项说明：http://docs.jquery.com/UI/Selectables/selectable#options
073 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html
074
075 1.5 Resizables改变大小
076 所需要的文件 ，此例子需要几个css文件
077 jquery.dimensions.js
078 ui.mouse.js
079 ui.resizable.js
080 用法：
081 $(document).ready(function(){
082 $("#example").resizable();
083 });
084 CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
085 选项说明：http://docs.jquery.com/UI/Resizables/resizable#options
086 选项实例：http://dev.jquery.com/view/trunk ... s/ui.resizable.html
087
088 第二部分：互动效果
089 2.1 Accordion 折叠菜单
090 所需要的文件:
091 ui.accordion.js
092 jquery.dimensions.js
093 用法：
094 $(document).ready(function(){
095 $("#example").accordion();
096 });
097 CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
098 选项说明：http://docs.jquery.com/UI/Accordion/accordion#options
099 选项实例：http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1
100 2.2 dialogs 对话框
101 所需要的文件：
102 jquery.dimensions.js
103 ui.dialog.js
104 ui.resizable.js
105 ui.mouse.js
106 ui.draggable.js
107
108 用法：
109 $(document).ready(function(){
110 $("#example").dialog();
111 });
112 CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
113 选项说明：http://docs.jquery.com/UI/Dialog/dialog#options
114 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html
115
116 2.3 sliders 滑动条
117 所需要的文件
118 jquery.dimensions.js
119 ui.mouse.js
120 ui.slider.js
121
122 用法：
123 $(document).ready(function(){
124 $("#example").slider();
125 });
126
127 CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
128 选项说明：http://docs.jquery.com/UI/Slider/slider#options
129 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html
130
131 2.4 Tablesorter表格排序
132 所需要的文件
133 ui.tablesorter.js
134
135 用法：
136 $(document).ready(function(){
137 $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
138 });
139
140 CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
141 选项说明：http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options
142 选项实例：http://tablesorter.com/docs/#Demo
143
144 2.5 tabs页签(对IE支持不是很好)
145 所需要的文件
146 ui.tabs.js
147 用法：
148 $(document).ready(function(){
149 $("#example > ul").tabs();
150 });
151 CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
152 选项说明：http://docs.jquery.com/UI/Tabs/tabs#initialoptions
153 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html
154 tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html
155
156 第三部分：效果
157 3.1 Shadow 阴影
158 实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
159 3.2 Magnifier 放大
160 实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html
相关阅读 更多 +
