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. Bellman-Ford算法及其队列优化（SPFA）

    一.算法概述 Bellman-Ford算法解决的是一般情况下的单源最短路径问题.所谓单源最短路径问题:给定一个图G=(V,E),我们希望找到从给定源结点s属于V到每个结点v属于V的最短路径.单源最短路 ...

  2. MySQL on Azure高可用性设计 DRBD - Corosync - Pacemaker - CRM (一)

    MySQL迁移到Azure上后,由于云的特性,在自建数据中心的MySQL的HA的方法在云上很多都不能部署. 这主要是因为,目前Public Cloud不支持:1. 共享存储:2. Multicast: ...

  3. 三、使用maven创建scala工程（scala和java混一起）

    本文先叙述如何配置eclipse中maven+scala的开发环境,之后,叙述如何实现spark的本地运行.最后,成功运行scala编写的spark程序. 刚开始我的eclipse+maven环境是配 ...

  4. w25q128 优化读写函数

    #include "w25qxx.h"  #include "spi.h" #include "delay.h"    #include & ...

  5. 【转】Ruby on Rails中select使用方法

    在Ruby on Rails中真的有一堆Select helper可以用,我们经常容易混淆.常见的有三个..select, select_tag, collection_select(其余的什么sel ...

  6. Python模块-subprocess模块

    Run()方法 >>> a = subprocess.run(['df','-h']) 文件系统 容量 已用 可用 已用% 挂载点 udev 468M 0 468M 0% /dev ...

  7. linux日常管理-free查看内存工具

    查看内存 命令 free  默认是k为单位 也可以指定 m为单位 或者G为单位,这个不精准 total 总容量 used  使用了多少 free  剩余多少 看第二行.第一行是物理内存,加上虚拟内存b ...

  8. 常见的CSS和HTML面试题

    1. 常用那几种浏览器测试?有哪些内核(Layout Engine)? 浏览器:IE,Chrome,FireFox,Safari,Opera. 内核:Trident,Gecko,Presto,Webk ...

  9. VS编译器中设置 输出窗口 只显示error，不显示warning 要如何配置

    VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置 在编译大型项目的时候,总是VS编译器的输出窗口总是会出现一堆warning警告,要想在里面找到error错误,要使用鼠标 ...

  10. NVI模式

    简介: --NVI即(Non-VIrtual Interface)模式强化依赖倒置,介于 Virtual与No Virtual 之间 允许子类重新实现 也可以在父类中对子类 进行限制和其它操作. 由来 ...