各種效果的jqueryui接口簡(jiǎn)介

1、基本的鼠標(biāo)互動(dòng)：拖拽(drag and dropping)、排序(sorting)、選擇(selecting)、縮放(resizing)各種互動(dòng)效果：手風(fēng)琴式的折疊菜單(accordions)、日歷(date pickers)>對(duì)話框(dialogs)、滑動(dòng)條(sliders)>表格排序(table sorters)、頁簽(tabs)、放大鏡效果(magnifier)、陰影效果(shadow)第一部分：鼠標(biāo)交互1.1 Draggables :拖拽所需文件：ui.mouse.jsui.draggable.jsui.draggable.ext.js用法：文件載入后，可以拖拽 class

2、 = "block"的層$(document).ready(function()$(".block").draggable(););draggable(options)可以跟很多選項(xiàng)選項(xiàng)說明:http:/docs.jquery.cOm/UI/Draggables/draggable#options選項(xiàng)實(shí)例：1.2 Droppables所需要文件，drag dropui.mouse.jsui.draggable.jsui.draggable.ext.jsui.droppable.jsui.droppable.ext.js用法：$(document).rea

3、dy(function()$(".block").draggable(helper: 'clone');$(".drop").droppable(accept: ".block",activeClass: 'droppable-active',hoverClass: 'droppable-hover',drop: function(ev, ui) $(this).append("<br>Dropped!”);););選項(xiàng)說明:選項(xiàng)實(shí)例：1.3 Sortables 排

4、序所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.sortable.js用法：$(document).ready(function()($("#myList").sortable(););dimensions 文檔 選項(xiàng)說明:http:/docs.jquery.cOm/UI/Sortables/sortable#options選項(xiàng)實(shí)例：1.4 Selectables 選擇所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.dr

5、oppable.jsui.selectable.js用法：$(document).ready(function()$("#myList").selectable(););選項(xiàng)說明:http:/docs.jquery.cOm/UI/Selectables/selectable#options選項(xiàng)實(shí)例：1.5 Resizables 改變大小所需要的文件，此例子需要幾個(gè)css文件jquery.dimensions.jsui.mouse.jsui.resizable.js用法：$(document).ready(function()$("#example").r

6、esizable(););CSS 文件:選項(xiàng)說明:http:/docs.jquery.cOm/UI/Resizables/resizable#options選項(xiàng)實(shí)例： . s/ui.resizable.html第二部分：互動(dòng)效果2.1 Accordion 折疊菜單所需要的文件：ui.accordion.jsjquery.dimensions.js用法：$(document).ready(function()$("#example").accordion(););CSS 文件: 選項(xiàng)說明:http:/docs.jquery.eom/UI/Accordion/accordion

7、#options 選項(xiàng)實(shí)例： 2.2 dialogs 對(duì)話框所需要的文件：jquery.dimensions.jsui.dialog.jsui.resizable.jsui.mouse.jsui.draggable.js用法：$(document).ready(function()($("#example").dialog();)；CSS 文件:選項(xiàng)說明:選項(xiàng)實(shí)例：2.3 sliders 滑動(dòng)條所需要的文件jquery.dimensions.jsui.mouse.jsui.slider.js用法：$(document).ready(function()($("#e

8、xample").slider();)；CSS 文件:選項(xiàng)說明:選項(xiàng)實(shí)例：2.4 Tablesorter 表格排序所需要的文件ui.tablesorter.js用法：$(document).ready(function()($("#example").tablesorter(sortList:0,0,2,1, widgets: 'zebra');)；CSS 文件: 選項(xiàng)說明:2.5 tabs頁簽(對(duì)IE支持不是很好)所需要的文件ui.tabs.js用法：$(document).ready(function()$("#example > ul").tabs(););CSS 文件:選項(xiàng)說明:http:/docs.jquery.C