各种效果的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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python if not in 多条件判断代码
2016/09/21 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
教师节学生演讲稿
2014/09/03 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
安全检查汇报材料
2014/12/26 职场文书
长江三峡导游词
2015/01/31 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫