<!DOCTYPE html>

<html>

<head>

    <title>slider</title>

    <meta charset="utf-8">

      <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

    <p id="mem_num"></p>

    <div id="slider"></div>

    <button class="btn btn-success" id="test01">禁用</button>

    <button class="btn btn-success" id="test02">激活</button>

    <button class="btn btn-success" id="test03">获取参数</button>

    <button class="btn btn-success" id="test04">切换</button>


    <script type="text/javascript">


        $( "#slider" ).slider({

            // 动画效果快速

            animate: "fast",

            // 关闭滑动条

            // disabled: true,

            //最小值为2，最大值为32，每一次拖动变化为2，默认值为4

            min: 2,

            max: 32,

            step: 2,

            value: 4,

            // 获取滑动条的值并且打印

            slide: function( event, ui ) {

                $('#mem_num').html(ui.value)

                console.log(ui.value);

            }

        });

        //禁用滑动条

        $('#test01').on('click', function(){

            $( "#slider" ).slider( "option", "disabled", true );

        })

        //激活滑动条

        $('#test02').on('click', function(){

            $( "#slider" ).slider("enable");

        })

        //获取滑动条的值，在console窗口打印
　　　　

        $('#test03').on('click', function(){

            console.log($( "#slider" ).slider( "value" ));

        })

        //在禁用和激活之间切换

        $('#test04').on('click', function(){

            var is_disabled = $( "#slider" ).slider( "option", "disabled" );

            if(is_disabled) {

                $("#slider").slider("enable");

                $('#test04').html('禁用');

            }else{

                $( "#slider" ).slider( "option", "disabled", true );

                $('#test04').html('激活');

            }

        })

    </script>

</body>

</html>

示例，滚动条展示数值：

参考：

http://jqueryui.com/slider/#custom-handle

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>jqueryui</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <style>

  #custom-handle {

    width: 3em;

    height: 1.6em;

    top: 50%;

    margin-top: -.8em;

    text-align: center;

    line-height: 1.6em;

  }

  </style>

</head>

<body>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</body>

<!-- <div id="slider" class="selector"></div> -->

<div id="slider">

  <div id="custom-handle" class="ui-slider-handle"></div>

</div>

<script>

  $( function() {

    var handle = $( "#custom-handle" );

    $( "#slider" ).slider({

      // range: true,

      min: 2,

      max: 64,

      step: 2,

      create: function() {

        handle.text( $( this ).slider( "value" ) );

      },

      slide: function( event, ui ) {

        handle.text( ui.value );

      }

    });

  } );

  </script>

</html>

jqueryui插件slider的简单使用的更多相关文章

  1. $.widget 编写jQueryUI插件(widget)

    转自:MainTao: 编写jQueryUI插件(widget) 使用jQueryUI的widget来写插件,相比于基本的jquery插件有一些好处: * 方便实现继承,代码重用 * 默认是单例 * ...

  2. jqueryUI 插件

    1,拖拽插件  draggable 拖拽插件draggable的功能是拖动被绑定的元素, 当这个jqueryUI插件与元素绑定后,可以通过调用draggable()方法,实现何种拖拽元素的效果 $(s ...

  3. WordPress 插件机制的简单用法和原理（Hook 钩子）

    WordPress 的插件机制实际上只的就是这个 Hook 了,它中文被翻译成钩子,允许你参与 WordPress 核心的运行,是一个非常棒的东西,下面我们来详细了解一下它. PS:本文只是简单的总结 ...

  4. ASP.NET MVC 4 插件化架构简单实现-思路篇

    用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC 4 来实现每个插件都可以完全从主站点剥离出来,即使只是一个插 ...

  5. ASP.NET MVC 4 插件化架构简单实现-实例篇

    先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集. 4.定义模板引擎的搜索路径. 5.在模板引擎的查找页面方 ...

  6. MVC 4 插件化架构简单实现实例篇

    ASP.NET MVC 4 插件化架构简单实现-实例篇   先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集 ...

  7. MVC 4 插件化架构简单实现

    转ASP.NET MVC 4 插件化架构简单实现-思路篇   用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC ...

  8. 一、奇妙插件Tampermonkey的简单安装教程

    奇妙插件Tampermonkey的简单安装教程 1.下载 对于浏览器而言,一般的功能并不能满足"特殊用户的需求".这时候就须要插件来帮忙了.那么讲到插件的支持多又常见的浏览器必定要 ...

  9. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

随机推荐

  1. Java高并发秒杀API之业务分析与DAO层

    根据慕课网上关于java高并发秒杀API的课程讲解用maven+ssm+redis实现的一个秒杀系统 参考了codingXiaxw's blog,很详细:http://codingxiaxw.cn/2 ...

  2. Entity Framework Code First 学习日记（1）精

    我最近几天正在学习Entity Framework Code First.我打算分享一系列的学习笔记,今天是第一部分: 为什么要使用Code First: 近 年来,随着domain driven d ...

  3. 常用Java数据库连接池

    概述 在这里所谓的数据库连接是指通过网络协议与数据库服务之间建立的TCP连接.通常,与数据库服务进行通信的网络协议无需由应用程序本身实现,原因有三: 实现复杂度大,需要充分理解和掌握相应的通信协议. ...

  4. SCTP接口模型

    一.接口模型 (1)SCTP套接字分为:一到一套接字和一到多套接字: (2)一到一套接字对应一个单独的SCTP关联(一个SCTP关联是两个系统之间的一个连接,不过可能由于多宿原因而在每个断点设计不止 ...

  5. 新闻类App顶部菜单栏封装

    概述 最近有一个需求,类似今日头条顶部的菜单栏.唯一区别是需要带可移动的下划线.网上查找资料,发现解决方案大部分是用UIScrollView实现.下方VC控制用UICollectionView.这样可 ...

  6. C++ 变量的引用 &

    创建变量的引用:int &a = b; 引用变量a是变量b的别名:是传址操作,把变量b的数据地址赋值给变量a,a和b指向同一个数据 主要用途:用作函数的形参,通过将引用变量用作参数,函数将使用 ...

  7. Java EE之Struts2异常[No mapping found for dependency [type=java.lang.String, name='actionPackages'#java.lang.RuntimeException]【摘抄】

    本博文摘自:http://www.blogjava.net/nkjava/archive/2009/03/29/262705.html 出现这个问题,可能是添加了struts2-codebehind包 ...

  8. Coursera Deep Learning 2 Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - week2, Optimization algorithms

    Gradient descent Batch Gradient Decent, Mini-batch gradient descent, Stochastic gradient descent 还有很 ...

  9. 基于TensorFlow Object Detection API进行相关开发的步骤

    *以下二/三.四步骤确保你当前的文件目录是以research文件夹为相对目录. 一/安装或升级protoc 查看protoc版本命令: protoc --version 如果发现版本低于2.6.0或运 ...

  10. oracle.sql.Clob类型转换成String类型

    方法一: public String ClobToString(Clob clob) throws SQLException, IOException { String reString = &quo ...