介绍几种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
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
1.3 Sortables 排序
买卖IC网所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用v法:
$(document).ready(function(){ $("#myList").sortable({}); });
dimensions文档http://jquery.com/plugins/project/dimensions
选项说明:http://docs.jquery.com/UI/Sortables/sortable#options
1.4 Selectables 选择
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法
$(document).ready(function(){ $("#myList").selectable(); }); $(document).ready(function(){ $("#myList").selectable(); });
选项说明:http://docs.jquery.com/UI/Selectables/selectable#options
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
第二部分:互动效果
2.1 Accordion 折叠菜单
所需要的文件:
ui.accordion.js
jquery.dimensions.js
用法:
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Accordion/accordion#options
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
2.3 sliders 滑动条买卖IC网所需要的文件
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
转载于:https://www.cnblogs.com/ph580/archive/2011/05/22/2053669.html
介绍几种jquery ui使用方法相关推荐
- 结合Scikit-learn介绍几种常用的特征选择方法
特征选择(排序)对于数据科学家.机器学习从业者来说非常重要.好的特征选择能够提升模型的性能,更能帮助我们理解数据的特点.底层结构,这对进一步改善模型.算法都有着重要作用. 特征选择主要有两个功能: 减 ...
- python 卡方检验 特征选择_结合Scikit-learn介绍几种常用的特征选择方法
特征选择(排序)对于数据科学家.机器学习从业者来说非常重要.好的特征选择能够提升模型的性能,更能帮助我们理解数据的特点.底层结构,这对进一步改善模型.算法都有着重要作用. 特征选择主要有两个功能: 减 ...
- 介绍一种找bug的方法
总第186篇/张俊红 今天介绍一种找bug的方法,分段执行.这个概念不知道多会进入到我脑海中的,可能是有这么一种专门的叫法.特地去网上查了查,好像并没有,只查到了某地方警察办案在通过推行分段执行来提高 ...
- 干货:结合Scikit-learn介绍几种常用的特征选择方法
原文:http://dataunion.org/14072.html 作者:Edwin Jarvis 特征选择(排序)对于数据科学家.机器学习从业者来说非常重要.好的特征选择能够提升模型的性能,更能帮 ...
- (干货)结合Scikit-learn介绍几种常用的特征选择方法
系统版本:window 7 (64bit) python版本:python 3.5 我的GitHub:https://github.com/weepon 写在前面:前段时间正好用到特征选择的知识,有幸 ...
- 如何人物抠图?介绍三种人物抠图的方法
如何将照片里的人物从照片里抠出来呢?在广告制作. 社交媒体.商品展示.影视制作等场景下,需要将产品图片与人物图片进行组合,这时就需要将人物从原始图片中抠出来,然后放置到广告背景中.今天来介绍三种方法, ...
- lasso特征选择python_转:结合Scikit-learn介绍几种常用的特征选择方法-2
4.2 平均精确率减少 Mean decrease accuracy 另一种常用的特征选择方法就是直接度量每个特征对模型精确率的影响.主要思路是打乱每个特征的特征值顺序,并且度量顺序变动对模型的精确率 ...
- html苹果怎么打开pdf文件,苹果手机怎么打开pdf格式的文件(这里介绍三种最实用的方法)...
将Word.PPT转换成PDF文件就能很好地保留原文件格式:或者把Excel文件转换成PDF文件来保存,就能保护里面的数据不被随意改动,因此也就确保了数据的安全性.那么PDF文件该怎么打开浏览呢?如何 ...
- 视频配音文字转语音怎么弄?介绍几种好用的方法给你
相信很多小伙伴在制作视频的时候都会遇到需要配音的问题,当我们不想用自己的声音去配音时,就可以借助一些配音软件来快速把文字转语音.下面我就来告诉你们视频配音制作软件有哪些,如果你们感兴趣的话,快来阅读本 ...
- python字典方法有三种_介绍三种访问字典的方法
定义字典 dic = {'a':"hello",'b':"how",'c':"you"} 方法一:for key in dic: print ...
最新文章
- 终极AutoCAD大师班:成为AutoCAD专家
- 模拟退火算法解决TSP(python实现 110+行代码)【gif生成】
- 基于事件驱动架构构建微服务第4部分:repositories
- 敏捷管理之绩效考核方案
- LeetCode 题 - 9 回文数
- srgan要训练多久_儿童内裤多久换一次,穿多久要扔掉?
- xmind转excel脚本(简化版)
- Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response.
- 整理学习之深度可分离卷积
- 计算机要重启电脑才能检测出u盘启动,电脑使用U盘需要重启才能识别分析及解决措施...
- Fresher玩深沉
- c语言基础知识大全 pdf,c语言基础知识点概述.pdf
- 如何计算芯片的ESP mac 地址
- 去除文件系统、只读等属性
- Android 系统第三方应用系统修改权限及在应用上层显示权限默认打开
- SQL server和MySQL编号自动生成
- 「AIGC」- ChatGPT可以怎么玩?
- 欧莱雅进博会展示口红打印机、超节水洗发产品;霍尼韦尔进博会签约顺丰集团、博腾股份 | 美通社头条...
- 【FZU】Problem 2181 快来买肉松饼 点双连通
- 树莓派玩黄油,编译运行ONScripter
热门文章
- java 上下文缓存_记一次JAVA 线上故障排查完整套路。
- BZOJ4318: OSU!
- mysql 日期时间运算函数(转)
- IOS设计模式学习(7)单例
- 音频播放IOS:AVAudioPlayer音频播放器
- 微软高性能网络编程示例程序
- 第二节--PHP5 的对象模型 -- Classes and Objects in PHP5 [2](转)
- leetcode349 python3 112ms 求两个数组的交集
- EntityFramework(EF) 单表与主从表的使用
- C++编程实践: 抽象基类