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. Operating System-Process(2)进程表&&中断处理

    上一篇文章阐述了进程的基本信息,本文主要介绍进程的实现,主要内容: 进程表(Process Table or Process Control Blocks) 中断处理(Interrupt) 一.进程表 ...

  2. 移植完linux-3.4.2内核，启动系统后使用命令ifconfig -a查看网络配置，没有eth0

    问题: / # ifconfig / # ifconfig eth0  ifconfig: eth0: error fetching interface information: Device not ...

  3. TS学习之泛型

    可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据 不适用泛型的函数 function myfn(args: number): number { return args; } functi ...

  4. GC偏好的校正与偏好程度的评估

    在二代测序仪上测出的数据,通常都会表现出测序深度与GC 含量的相关性,称为GC bias. GC bias校正 为了后续生物信息分析更加准确,通常需要做GC bias的校正. 2010 年 steve ...

  5. Luogu 3320 [SDOI2015]寻宝游戏

    一开始还真没想到. 发现从所有有宝藏的点出发绕一圈只要不刻意绕路答案都是一样的,即我们呢要求的最后答案$ans = dis(x_1, x_2) + dis(x_2, x_3) +... + dis(x ...

  6. MySql中的锁（表锁，行锁）

    锁是计算机协调多个进程或春线程并发访问某一资源的机制.在数据库中,除传统的计算资源(CPU,RAM,I/O)的争用之外,数据也是一种工许多用户共享的资源.如何保证数据并发访问的一致性,有效性是所有数据 ...

  7. 《Linux内核设计与实现》读书笔记（三）- Linux的进程

    进程是所有操作系统的核心概念,同样在linux上也不例外. 主要内容: 进程和线程 进程的生命周期 进程的创建 进程的终止 1. 进程和线程 进程和线程是程序运行时状态,是动态变化的,进程和线程的管理 ...

  8. Bootstrap栅格学习

    参考:https://segmentfault.com/a/1190000000743553 节选翻译自The Subtle Magic Behind Why the Bootstrap 3 Grid ...

  9. Docker删除私有仓库镜像

    V2 安装删除脚本 # curl https://raw.githubusercontent.com/burnettk/delete-docker-registry-image/master/dele ...

  10. iOS模拟器的应用沙盒在MAC中的位置

    每个iOS应用都有自己专属的应用沙盒.分别为 应用程序包 Documents/ Library/Caches/ Library/Preferences/ tmp/ 当运行模拟时,在MAC下找到对应路径 ...