基本的鼠标互动:
拖拽(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)可以跟很多选项
选项说明:http://docs.jquery.com/UI/Draggables/draggable#options
选项实例:http://dev.jquery.com/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("<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.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.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.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.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.js
ui.mouse.js
ui.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.js
jquery.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.1
2.2 dialogs 对话框
所需要的文件:
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.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.js
ui.mouse.js
ui.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.html
tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html
第三部分:效果
3.1 Shadow 阴影
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
3.2 Magnifier 放大
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html
分享到:
相关推荐
jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库
jquery_UI_各种接口详解
jquery.ui虽然在功能上距离extjs的ui还有段差距,但却不得不看好jquery的发展前景。 jquery近期和extjs合作了,希望强大的extjs ui能够被发挥在性能强劲的jquery框架里。希望本文档会给有需要的朋友带来帮助;感兴趣...
jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jquery-ui.css、jquery-ui.js
里面附有: 1.easyUI.rar; 2.jQuery and jQuery UI Reference 1.2 API.zip...9.jquery-ui-1.8.16.custom (jQuery 1.3.2以上版本适用不包含 jQuery 1.3.2).zip; 10.jquery-ui-1.9m3.zip; 11.jquery-ui-17custom.zip;
图书的源代部分; 还有由于容量的原因, 视频和web实例图片没有上传. 《jQuery全能权威指南:jQuery Core+jQuery Plugin+...、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
本文给大家带来jQuery UI参考手册,需要的朋友们可以下载看看jQuery UI 特性简单易用继承 jQuery 简易使用特性,提供高度抽象接口,短期改善 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...
jquery-ui+jquery-ui-rails
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jquery easy-ui的整体文件包,包括树,表单,表格等等,有demo,可以看相关demo后自己导入到项目用。
We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI (js/jquery-ui-1.8.4.custom.min.js), and css/ui-lightness/jquery-ui-1.8.4.custom.css which imports the ...
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
jquery-ui样式demo,非常实用,非常适合web开发
bootstrap&jQueryUI例子
jQuery官方UI插件,使用Jquery UI制作的,是学习UI很好的资源
jQuery-Ui,本地可直接引用,包括三个引用: 1)css样式 2)js 3)js-ui主题