各种效果的jquery ui(接口)介绍


Posted in Javascript onSeptember 17, 2008

基本的鼠标互动:
拖拽(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

Javascript 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
JS字符串处理实例代码
Aug 05 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
js canvas实现擦除动画
Jul 16 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
Prototype中dom对象方法汇总
Sep 17 #Javascript
Javascript 读后台cookie代码
Sep 15 #Javascript
javascript高亮效果的二种实现方法
Sep 14 #Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 #Javascript
js直接编辑当前cookie的脚本
Sep 14 #Javascript
javascript一些不错的函数脚本代码
Sep 10 #Javascript
利用Ext Js生成动态树实例代码
Sep 08 #Javascript
You might like
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python使用MONGODB入门实例
2015/05/11 Python
python reduce 函数使用详解
2017/12/05 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
如何写出高性能的JSP和Servlet
2013/01/22 面试题
实习医生自我评价
2013/09/22 职场文书
门卫岗位安全职责
2013/12/13 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
销售人员自我评价
2014/02/01 职场文书
上班玩手机检讨书
2014/02/17 职场文书
校庆标语集锦
2014/06/25 职场文书
行政申诉状范文
2015/05/20 职场文书
家长会开场白和结束语
2015/05/29 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang