基本的鼠标互动：拖拽(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)可以跟很多选项选项说明：http://docs.jquery.com/UI/Draggables/draggable#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html 1.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("<br>Dropped!"); }});});选项说明：http://docs.jquery.com/UI/Droppables/droppable#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html 1.3　Sortables　排序所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.sortable.js用法：$(document).ready(function(){ $("#myList").sortable({});});dimensions文档http://jquery.com/plugins/project/dimensions选项说明：http://docs.jquery.com/UI/Sortables/sortable#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html 1.4 Selectables 选择所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.selectable.js用法：$(document).ready(function(){ $("#myList").selectable();});选项说明：http://docs.jquery.com/UI/Selectables/selectable#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html 1.5　Resizables改变大小所需要的文件　，此例子需要几个css文件jquery.dimensions.jsui.mouse.jsui.resizable.js用法：$(document).ready(function(){ $("#example").resizable();});CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css选项说明：http://docs.jquery.com/UI/Resizables/resizable#options选项实例：http://dev.jquery.com/view/trunk ... s/ui.resizable.html 第二部分：互动效果2.1 Accordion 折叠菜单所需要的文件:ui.accordion.jsjquery.dimensions.js用法：$(document).ready(function(){ $("#example").accordion();});CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css选项说明：http://docs.jquery.com/UI/Accordion/accordion#options选项实例：http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.12.2 dialogs 对话框所需要的文件：jquery.dimensions.jsui.dialog.jsui.resizable.jsui.mouse.jsui.draggable.js 用法：$(document).ready(function(){ $("#example").dialog();});CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css选项说明：http://docs.jquery.com/UI/Dialog/dialog#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html 2.3 sliders 滑动条所需要的文件jquery.dimensions.jsui.mouse.jsui.slider.js 用法：$(document).ready(function(){ $("#example").slider();}); CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css选项说明：http://docs.jquery.com/UI/Slider/slider#options选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html 2.4 Tablesorter表格排序所需要的文件ui.tablesorter.js 用法：$(document).ready(function(){ $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});}); CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css选项说明：http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options选项实例：http://tablesorter.com/docs/#Demo 2.5 tabs页签(对IE支持不是很好)所需要的文件ui.tabs.js用法：$(document).ready(function(){ $("#example > ul").tabs();});CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css选项说明：http://docs.jquery.com/UI/Tabs/tabs#initialoptions选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.htmltabs ext http://stilbuero.de/jquery/tabs_3/rotate.html 第三部分：效果3.1 Shadow 阴影实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html3.2 Magnifier 放大实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html

　　推荐阅读

　　javascript批量检查当图片不存在时则显示默认图片的代码

这个是批量的检查，比较好的思路 在不存在图片时显示默认图片练习 by 阿会楠 img{ border:1px solid #cccccc; width:100px; height:50px; } >>>详细阅读

本文标题：各种效果的jquery ui(接口)介绍

地址：http://www.17bianji.com/kaifa2/JS/29419.html

 1/2    1