各种效果的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 相关文章推荐
javascript如何使用bind指定接收者
May 04 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
用JS实现飞机大战小游戏
Jun 09 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
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
对python中的for循环和range内置函数详解
2018/04/17 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python numpy元素的区间查找方法
2018/11/14 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python 实现多维数组转向量
2019/11/30 Python
python中如何使用虚拟环境
2020/10/14 Python
Python实现京东抢秒杀功能
2021/01/25 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
初婚未育证明
2014/01/15 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
学校工会工作总结2015
2015/05/19 职场文书
人与自然的观后感
2015/06/18 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
Java 关于String字符串原理上的问题
2022/04/07 Java/Android