各种效果的jquery ui(接口)简介.doc

基本的鼠标互动：拖拽(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 = block的层$(document).ready(function() $(.block).draggable(););draggable(options)可以跟很多选项选项说明：/UI/Draggables/draggable#options选项实例：/view/trunk/plugins/ui/tests/draggable.html1.2 Droppables所需要文件，drag dropui.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, drop: function(ev, ui) $(this).append(Dropped!); ););选项说明：/UI/Droppables/droppable#options选项实例：/view/trunk/plugins/ui/tests/droppable.html1.3Sortables排序所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.sortable.js用法：$(document).ready(function() $(#myList).sortable(););dimensions文档/plugins/project/dimensions选项说明：/UI/Sortables/sortable#options选项实例：/view/trunk/plugins/ui/demos/ui.sortable.html1.4 Selectables 选择所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.selectable.js用法：$(document).ready(function() $(#myList).selectable(););选项说明：/UI/Selectables/selectable#options选项实例：/view/trunk/plugins/ui/tests/selectable.html1.5Resizables改变大小所需要的文件，此例子需要几个css文件jquery.dimensions.jsui.mouse.jsui.resizable.js用法：$(document).ready(function() $(#example).resizable(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Resizables/resizable#options选项实例：/view/trunk . s/ui.resizable.html第二部分：互动效果2.1 Accordion 折叠菜单所需要的文件:ui.accordion.jsjquery.dimensions.js用法：$(document).ready(function() $(#example).accordion(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Accordion/accordion#options选项实例：/view/trunk/plugins/accordion/?p= dialogs 对话框所需要的文件：jquery.dimensions.jsui.dialog.jsui.resizable.jsui.mouse.jsui.draggable.js用法：$(document).ready(function() $(#example).dialog(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Dialog/dialog#options选项实例：/view/trunk/plugins/ui/tests/dialog.html2.3 sliders 滑动条所需要的文件jquery.dimensions.jsui.mouse.jsui.slider.js用法：$(document).ready(function() $(#example).slider(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Slider/slider#options选项实例：/view/trunk/plugins/ui/demos/ui.slider.html2.4 Tablesorter表格排序所需要的文件ui.tablesorter.js用法：$(document).ready(function() $(#example).tablesorter(sortList:0,0,2,1, widgets: zebra););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/Plugins/Tablesorter/tablesorter#options选项实例：/docs/#Demo2.5 tabs页签(对IE支持不是很好)所需要的文件ui.tabs.js用法：$(document).ready(function() $(#example ul).tabs(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Tabs/tabs#initialoptions选项实例：/view/trunk/plugins/ui/tests/tabs.htmltabs ext http:/stilbuero.de/jquery/tabs_3