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的更多相关文章

  1. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  2. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

    默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...

  4. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件

    像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为  j ...

  5. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  7. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  8. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  9. SharePoint2007深入浅出——使用jQuery UI

    jQuery1.6.4.js + jQuery UI 1.8.16.js 只有这个版本在IE8下的兼容性视图+Quirks(文本模式),dialog可以正常显示.

随机推荐

  1. VBA记录当前系统时间并精确到毫秒

    想做个功能,点一次按钮,就在A1记录一次当前系统时间,要精确到毫秒的.再点一次按钮就在A2显示,以此类推! 例如:这个功能可以用来做歌词记时间! Sub ttt() ActiveCell.Select ...

  2. 洛谷 2312 / bzoj 3751 解方程——取模

    题目:https://www.luogu.org/problemnew/show/P2312 https://www.lydsy.com/JudgeOnline/problem.php?id=3751 ...

  3. flume+kafka+storm+mysql架构设计

    前段时间学习了storm,最近刚开blog,就把这些资料放上来供大家参考. 这个框架用的组件基本都是最新稳定版本,flume-ng1.4+kafka0.8+storm0.9+mysql (项目是mav ...

  4. linux使用JMETER进行分布式压力测试

    1. 下载jmeter tgz文件   http://jmeter.apache.org/download_jmeter.cgi 2. 登录linux服务器,创建jmeter目录,rz上传jmeter ...

  5. Ruby模块（module）

    Ruby模块(module) 2013-04-03 16:47:09|  分类: Ruby |  标签:ruby  require  load  extend  include  |字号 订阅     ...

  6. Python-连接Redis并操作

    首先开启redis的外连 sch01ar@ubuntu:~$ sudo vim /etc/redis/redis.conf 把bind 127.0.0.1这行注释掉 然后重启redis sudo /e ...

  7. 关于audio.js的研究

    ——杂言:audio.js结合使用html5的audio组件实现了音频的原位播放功能.虽然项目里已经使用一段时间了,不过我是最近才开始有所接触,惭愧.个人见解若有不对,请帮忙纠正,谢谢. 官方相关链接 ...

  8. SQL标量值函数：小写金额转大写

    我们日常开发业务系统中,作为统计报表中,特别是财务报表,显示中文金额经常遇到. 转换大小写的方法有很多,以下是从数据库函数方面解决这一问题. 效果如图: 调用:SELECT dbo.[Fn_Conve ...

  9. 菜鸟大充电啦啦啦啦啦：eclipse SDK 是什么啊

    为什么下载是,没有单独的ecipse呢,,总是eclipse-sdk呢 而且还很大几百兆 回复1: Eclipse有好多专用名称,例如Eclipse SDK等.先说一下SDK, Eclipse Pro ...

  10. 【机器学习】关联规则挖掘（二）：频繁模式树FP-growth

    Apriori算法的一个主要瓶颈在于,为了获得较长的频繁模式,需要生成大量的候选短频繁模式.FP-Growth算法是针对这个瓶颈提出来的全新的一种算法模式.目前,在数据挖掘领域,Apriori和FP- ...