<!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. Maven入门:使用Nexus搭建Maven私服及上传下载jar包

    一. 私服搭建及配置 1 . 私服简介 私服是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构件.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓 ...

  2. mysql驱动参数变化

    在java平台使用的mysql jdbc驱动为:mysql-connector-java. 在项目中添加如下依赖: <dependency> <groupId>mysql< ...

  3. 【转载】C# 字符串截取

    https://blog.csdn.net/maba007/article/details/78424760

  4. json中带有\r\n处理

    后台代码把换行符\r\n替换为\\r\\n,前台代码js收到的字符就是\r\n

  5. idea中配置Springboot热部署

    1 pom.xml文件 注:热部署功能spring-boot-1.3开始有的 <!--添加依赖--> <dependency> <groupId>org.sprin ...

  6. cuda、cuDNN的相关内容

    1.nvidia与cuda需要满足关系: https://docs.nvidia.com/cuda/cuda-toolkit-release-notes/index.html/ 2.cuda与cudn ...

  7. influxdb

    1.安装Centos# wget https://dl.influxdata.com/influxdb/releases/influxdb-1.1.0.x86_64.rpm# rpm -ivh inf ...

  8. cpp for each

    第一种 自动推导类型i从arr的地址0 之后地址向下循环向I赋值 for(auto i:arr){ }//arr内的值不会变 第二种  自动推导类型i从arr的地址0 之后地址向下循环向I赋地址 fo ...

  9. Leetcode#169. Majority Element(求众数)

    题目描述 给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入: [3,2,3] ...

  10. 网易云课堂《JS原创视频教程-知识点类》

    http://caniuse.com/#index     //Can I use... Support tables for HTML5, CSS3, etc-支持h5和css3的情况列表 JS包含 ...