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可以正常显示.
随机推荐
- 从python2,python3编码问题引伸出的通用编码原理解释
今天使用python2编码时遇到这样一条异常UnicodeDecodeError: ‘ascii’ code can’t decode byte 0xef 发现是编码问题,但是平常在python3中几 ...
- Oracle 12c 多租户 CDB 与 PDB 级别 expdb 与 impdb（表、用户、全库）
Oracle 数据库 12 c 多租户下,如何在容器数据库 (CDB) 和可插拔数据库 (PDB) 中使用 expdb 与 impdp (数据泵) 呢? 我们一起探讨下PDB 下进行表级,用户级别,全 ...
- Chrome Developer Tools之内存分析
可参考: Chrome Developer Tools之内存分析 http://www.kazaff.me/2014/01/26/chrome-developer-tools%E4%B9%8B%E5% ...
- android开发中 解决服务器端解析MySql数据时中文显示乱码的情况
首先,还是确认自己MySql账户和密码 1.示例 账户:root 密码:123456 有三个字段 分别是_id .username(插入有中文数据).password 1)首先我们知道 ...
- debian服务查询
1.查询 用root身份执行service --status-all查看所有服务的状态 "+" started "-" stopped "?" ...
- POJ2080:Calendar(计算日期)
Calendar Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 12842 Accepted: 4641 Descrip ...
- HDOJ1025(最长上升子序列)
Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65 ...
- Wireshark抓取本地Tcp包（任何数据包）
没有任何一个程序员在做项目的时候不会遇到网络编程的问题,要解决这些问题除了对各种网络协议深入了解之外,还需要掌握各种网络分析工具的用法,不用多说wireshark绝对是这方面的翘楚,可惜的是,wire ...
- n文件的上传和下载，struts2和springmvc
首先,struts2的上传下载的配置 因为struts2是配置的上传的拦截器,很简单的步揍就可以上传, 首先是配置struts的action映射 <!-- 4. 修改上传文件的最大大小为30M ...
- numpy.zeros(shape, dtype=float, order='C')
numpy.zeros Return a new array of given shape and type, filled with zeros. Parameters: shape : int o ...