jquery+ui手册详解(精编).pdfVIP

jquery.ui 使用手册 Jquery 2009-03-19 14:07 阅读193 评论0 字号： 大 中 小 jquery.ui 虽然在功能上距离extjs 的ui 还有段差距，但却不得不看好jquery 的发展前景。 jquery 近期和extjs 合作了，希望强大的extjs ui 能够被发挥在性能强劲的jquery 框架里。 让我们拭目以待~ 基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果： 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、 表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow) 第一部分：鼠标交互 1.1 Draggables:拖拽 所需文件： ui.mouse.js ui.draggable.js ui.draggable.ext.js 用法：文件载入后，可以拖拽class = block的层 $(document).ready(function(){ $(.block).draggable(); }); draggable(options)可以跟很多选项 选项说明：/UI/Draggables/draggable#options 选项实例：/view/trunk/plugins/ui/tests/draggable.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(brDropped!); } }); }); 选项说明：/UI/Droppables/droppable#options 选项实例：/view/trunk/plugins/ui/tests/droppable.html 1.3 Sortables 排序 所需要的文件 jquery.dimensions.js ui.mouse.js ui.draggable.js ui.droppable.js ui.sortable.js 用法： $(document).ready(function(){ $(#myList).sortable({}); }); dimensions 文档/plugins/project/dimensions 选项说明：/UI/Sortables/sortable#options 选项实例：/view/trunk/plugins/ui/demos/ui.sortable.html 1.4 Selectables 选择 所需要的文件 jquery.dimensions.js ui.mouse.js ui.draggable.js ui.droppable.js ui.selectable.js 用法： $(document).ready(function(){ $(#myList).selectable(); }); 选项说明：/UI/Selectables/selectable#options 选项实例：/view/trunk/plugins/ui/tests/selectable.html 1.5 Resizables 改变大小 所需要的文件 ，此例子需要几个css 文件 jquery.dimensions.js ui.mouse.js ui.resizable.js 用法： $(document).ready(function(){ $