Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  JQuery UI  >  正文 jQuery UI入门手册

jQuery UI入门手册

发布时间:2013-03-22   编辑:www.jquerycn.cn
jquery中文网为您提供jQuery UI,jQuery UI入门手册等资源,欢迎您收藏本站,我们将为您提供最新的jQuery UI,jQuery UI入门手册资源

jquery 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”的层

$(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/plugins/ui/demos/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

还可以在这里了解jquery ui tabs 即标签页插件

您可能感兴趣的文章:
jquery ui 中文手册
jQuery UI 教程之二 ——jquery ui dialog的使用
jQuery iPhone UI
jQuery UI 教程之一 ——入门
13个绚丽的Jquery 界面设计网站推荐
js注册验证代码大全
jQuery UI 教程之三 ——jquery ui datepicker的使用
jquery 新手学习常见问题解决方法
jQuery UI入门手册
嵌入式JavaScript框架 jQTouch

[关闭]