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. puppet多环境配置（puppet自动化系列2）

    三.Puppet多环境部署 我们为puppetmaster建立3个环境,它们分别是开发环境(jqdev).测试环境(jqtest).生产环境(jqprd). 3.1 配置puppet.conf 在标签 ...

  2. centos7 中文乱码解决方法

    centos7 中文乱码解决方法 标签(空格分隔): centos7 1.查看安装中文包: 查看系统是否安装中文语言包 (列出所有可用的公共语言环境的名称,包含有zh_CN) # locale -a ...

  3. cmake opencv,dlib 编译静态库 1

    无论windows,linux 所有的库 ,dlib,opencv 通过cmake-gui 设置好静态库, 动态库,和其他各个选项 Tips: cmake 优先级用cmake-gui,因为命令太多,容 ...

  4. AD9各种布线总结

    1.常规布线:不详细说了,是个人就知道怎么弄.需要说明的是在布线过程中,可按小键盘的*键或大键盘的数字2键添加一个过孔:按L键可以切换布线层:按数字3可设定最小线宽.典型线宽.最大线宽的值进行切换. ...

  5. Linux 文件名颜色

    在Linux中,文件的颜色都是有含义的.其中, 蓝色表示目录 绿色表示可执行文件 红色表示压缩文件 浅蓝色表示链接文件 灰色表示其它文件 红色闪烁表示链接的文件有问题了 黄色是设备文件,包括block ...

  6. nodejs利用windows API读取文件属性(dll)

    nodejs调用delphi编写的dll中,使用了dll调用windows api转读取文件属性,感觉使用nodejs也可直接调用windows api. 此处需用到windows系统的version ...

  7. Java学习路线-知乎

    鼬自来晓 378 人赞同 可以从几方面来看Java:JVM Java JVM:内存结构和相关参数含义 · Issue #24 · pzxwhc/MineKnowContainer · GitHub J ...

  8. CentOS 7 配置 samba服务器

    一.在服务器端上安装软件并进行相关配置(以下操作需用用户root进行): 1.安装samba: yum -y install samba samba-client 2.启动服务并设置开机启动: sys ...

  9. SQL标量值函数：返回汉字拼音首拼

    今天遇到一个需求,客户要求在系统客户端选择客户的时候,可以用拼音首拼去快速过滤选择,此时我们在客户表里面加多一个拼音首拼字段CustPY来记录,字段加好了,我们要把所有客户名称的拼音简拼都更新到Cus ...

  10. 报错:Caused by: org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assigned before calling save(): cn.itcast.bos.domain.base.SubArea

    因为 实体类中的主键 是String类型 不能自动为其分配id  所以需要手动设置在service层   model.setId(UUID.randomUUID().toString());