JS——jquery UI
1. draggable()
滑动条demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.con{
width:300px;
height:300px;
border:1px solid #000;
margin:50px auto 0;
} .box{
width:50px;
height:50px;
background-color:hotpink;
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
//使得box可以鼠标拖动
$('.box').draggable({
//约束元素在父级内拖动
containment:'parent',
//约束元素只能横向拖动
axis:'x',
//元素拖动时透明度变为0.6
opacity:0.6,
//ui里面有什么可以用console.log（ui）查看
drag:function (ev,ui) {
var nowleft = ui.position.left;
}
});
})
</script>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
</html>
JS——jquery UI的更多相关文章
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件
默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件
像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为 j ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
- SharePoint2007深入浅出——使用jQuery UI
jQuery1.6.4.js + jQuery UI 1.8.16.js 只有这个版本在IE8下的兼容性视图+Quirks(文本模式),dialog可以正常显示.
随机推荐
- gulp安装简介
1 全局安装gulp:npm install -g gulp 2 在项目根目录中,安装项目的开发依赖:npm install --save-dev gulp 2.1 根据gulpfile.js中的依赖 ...
- [转]Google开源Leak Finder—用于检测内存泄漏的JavaScript工具-----可惜，暂时打不开google的网站，下载不了
近日,Google开源了Leak Finder,这款工具可以查看JavaScript应用的堆,进而发现内存泄漏. 作为一门垃圾收集语言,JavaScript并不会出现常见的内存泄露情况,特别是像C++ ...
- javascript自我测试题
javascript自我测试题--14道题而已! 地址:http://perfectionkills.com/javascript-quiz/ 司徒正美的答案解析:http://www.cnblogs ...
- Operating System-Thread(4) 线程的调度激活机制（Scheduler Activations）
本文主要介绍线程的调度激活机制(Scheduler Activations),主要内容: 调度激活机制简介 上行调用(upcall) 中断处理(Interrupt) 一. 调度激活机制简介 上一篇文章 ...
- Erlang generic standard behaviours -- summary
gen_server 相关的片段分析得也差不多了, 这篇作为一个简要的总结.这一系列相关的分析暂且告一段落(之后如有必要,还会回来的 ^^ ),下一个系列主要是以pool 相关, 包括但不仅限于开源项 ...
- ThinkPHP5.1的公共函数
最初使用ThinkPHP3.2.3的时候,我们自己定义的公共函数常常放置于 \Common\function.php ThinkPHP5.1 公共函数 项目公用的会放在 \application\co ...
- css基础知识二
1.盒模型: 实际宽度:外边距*2+内边距*2+边框*2+内容宽度(注意这点,可解决界面元素轻微浮动问题,如hover有边框,以前没的时候会有轻微浮动) 作用:他规定了网页元素如何显示以及其相互关系 ...
- 【问题】Expandable数据集的定义的正确方法，TabActivity弃用替代，Gallery替代,imageswitcher
Expandable 问题: http://www.cnblogs.com/xingyyy/p/3389611.html 扩展阅读:http://blog.csdn.net/lmj623565791/ ...
- MySql集合查询
SELECT语句的查询结果是元组的集合,所以多个SELECT语句的结果可进行集合操作. 集合操作主要包括并操作UNION.交操作INTERSECT.差操作EXCEPT. 注意,参加集合操作的各查询结果 ...
- 22.ThinkPHP5框架缺陷导致远程命令执行
前言: 昨天爆出了ThinkPHP5框架缺陷导致远程命令执行,大佬们都赶上潮流挖洞,小白还是默默学习一下这个漏洞 漏洞影响范围: Thinkphp 5.1.0 - 5.1.31 Thinkphp 5. ...