- zfms
- 等级: 初级会员
- 性别:
- 文章: 92
- 积分: 30
- 来自: 济南
|
想找份用jsp做网站的web2.0的公司,谁能帮我啊,QQ:64738479,可以联系我。 所有效果说明: 基本的鼠标互动: 拖拽(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
第三部分:效果 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
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
|
返回顶楼 |
|
|
- javachs
- 等级: 初级会员
- 性别:
- 文章: 551
- 积分: 30
- 来自: 上海
|
这个ui.core.js是那里下的?
|
返回顶楼 |
|
|
- quaff
- 等级:
- 性别:
- 文章: 380
- 积分: 336
- 来自: 天朝
|
1.5正式版刚刚发布
|
返回顶楼 |
|
|
- dricky
- 等级: 初级会员
- 性别:
- 文章: 1
- 积分: 30
- 来自: 成都
|
楼主是不是直接把JQuery网站上的例子直接存下来的?
|
返回顶楼 |
|
|
- iamclq
- 等级: 初级会员
- 性别:
- 文章: 1
- 积分: 30
- 来自: 福建
|
最近正在学,谢谢楼主
|
返回顶楼 |
|
|
- peacock
- 等级: 初级会员
- 性别:
- 文章: 158
- 积分: 50
- 来自: 贵阳
|
JQuery的UI和ExtJS的UI还有一定的距离,不过JQuery后劲很强,现在连MS也开始支持了
|
返回顶楼 |
|
|
- myprincejava
- 等级: 初级会员
- 性别:
- 文章: 73
- 积分: 40
- 来自: 来自太平洋
|
LS有表格排序jquery.tablesorter.js文件不!现在急用...谢谢!
|
返回顶楼 |
|
|
- nice_boy
- 等级: 初级会员
- 性别:
- 文章: 16
- 积分: 30
- 来自: 杭州
|
楼主大好人啊,最近在学
|
返回顶楼 |
|
|