jquery ui是jquery官方推出的配合jquery使用的用户界面组件集合!包含了许多的界面操作功能,如我们常用的表格排序,拖拽,TAB选项卡,滚动条,相册浏览,日历控件,对话框等JS插件~~可以很方便的开发用户界面上的功能,使得您的开发工作事半功倍~~不用写繁琐的JS代码
现在,我介绍一些常用的UI库的使用
基本的鼠标互动:
拖拽(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”的层
1.$(document).ready(function(){
2. $(".block").draggable();
3.});
draggable(options)可以跟很多选项
1.2 Droppables
所需要文件,drag drop
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
ui.droppable.js
ui.droppable.ext.js
用法:
1.$(document).ready(function() {
2. $(".block").draggable({ helper: 'clone' });
3. $(".drop").droppable({
4. accept: ".block",
5. activeClass: 'droppable-active',
6. hoverClass: 'droppable-hover',
7. drop: function(ev, ui) {
8. $(this).append("Dropped!");
9. }
10. });
11.});
1.3 Sortables 排序
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用法:
1.$(document).ready(function(){
2. $("#myList").sortable({});
3.});
1.4 Selectables 选择
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法:
1.$(document).ready(function(){
2. $(”#myList”).selectable();
3.});
1.5 Resizables改变大小
所需要的文件 ,此例子需要几个css文件
jquery.dimensions.js
ui.mouse.js
ui.resizable.js
用法:
1.$(document).ready(function(){
2. $(”#example”).resizable();
3.});
第二部分:互动效果
2.1 Accordion 折叠菜单
所需要的文件:
ui.accordion.js
jquery.dimensions.js
用法:
1.$(document).ready(function(){
2. $(”#example”).accordion();
3.});
2.2 dialogs 对话框
所需要的文件:
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js
用法:
JavaScript代码
1.$(document).ready(function(){
2. $("#example").dialog();
3.});
2.3 sliders 滑动条
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.slider.js
用法:
1.$(document).ready(function(){
2. $("#example").slider();
3.});
2.4 Tablesorter表格排序
所需要的文件
ui.tablesorter.js
用法:
JavaScript代码
1.$(document).ready(function(){
2. $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
3.});
2.5 tabs页签(对IE支持不是很好)
所需要的文件
ui.tabs.js
用法:
1.$(document).ready(function(){
2. $("#example > ul").tabs();
3.});
第三部分:效果
3.1 Shadow 阴影
3.2 Magnifier 放大
(因为不让发超链接是,所以很多演示都放不上来)