jqueryui插件slider的简单使用
<!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的简单使用的更多相关文章
- $.widget 编写jQueryUI插件(widget)
转自:MainTao: 编写jQueryUI插件(widget) 使用jQueryUI的widget来写插件,相比于基本的jquery插件有一些好处: * 方便实现继承,代码重用 * 默认是单例 * ...
- jqueryUI 插件
1,拖拽插件 draggable 拖拽插件draggable的功能是拖动被绑定的元素, 当这个jqueryUI插件与元素绑定后,可以通过调用draggable()方法,实现何种拖拽元素的效果 $(s ...
- WordPress 插件机制的简单用法和原理(Hook 钩子)
WordPress 的插件机制实际上只的就是这个 Hook 了,它中文被翻译成钩子,允许你参与 WordPress 核心的运行,是一个非常棒的东西,下面我们来详细了解一下它. PS:本文只是简单的总结 ...
- ASP.NET MVC 4 插件化架构简单实现-思路篇
用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC 4 来实现每个插件都可以完全从主站点剥离出来,即使只是一个插 ...
- ASP.NET MVC 4 插件化架构简单实现-实例篇
先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集. 4.定义模板引擎的搜索路径. 5.在模板引擎的查找页面方 ...
- MVC 4 插件化架构简单实现实例篇
ASP.NET MVC 4 插件化架构简单实现-实例篇 先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集 ...
- MVC 4 插件化架构简单实现
转ASP.NET MVC 4 插件化架构简单实现-思路篇 用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC ...
- 一、奇妙插件Tampermonkey的简单安装教程
奇妙插件Tampermonkey的简单安装教程 1.下载 对于浏览器而言,一般的功能并不能满足"特殊用户的需求".这时候就须要插件来帮忙了.那么讲到插件的支持多又常见的浏览器必定要 ...
- [原创]首次制作JQueryUI插件-Timeline时间轴
特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...
随机推荐
- Linux命令(十三)make_makefile基础
1. 好处 一次编写,终身受益 2. 命名规则 makefile Makefile 3. 三要素 目标 依赖 规则命令 4. 第一版makefile 目标:依赖 tab键 规则命令 makefile: ...
- 061、flannel的连通与隔离(2019-04-01 周一)
参考https://www.cnblogs.com/CloudMan6/p/7447716.html flannel网络连通性测试 不同host上的容器可以通过flannel网络进行通信,需要借助 ...
- jqgrid again
之前有提及过jqgrid这个很不错的jquery grid, 非常适合企业MIS系统使用. 本文以一个显示学生成绩结果的页面, 来说明它的一些用法, 手写代码, 运行可能会报错, 不过思路是经过验证的 ...
- CSS样式选择
1:#a,b{…………}一个id叫a和一个标签是b的样式 2:#a b{…………}一个id叫a下面的一个标签是b的样式3:#a:b{…………}一个id叫a的伪类b的样式4:#a.b{…………}一个id ...
- Rose 2003使用的问题
1.win10下直接找exe版本的,虚拟光驱版本的麻烦. 2.安装后要重启计算机会自动再安装一个组件,不然无法启动. 3.用例图.活动图在这里. 下载地址:http://www.downcc.com/ ...
- 新萌渗透测试入门DVWA 教程1:环境搭建
首先欢迎新萌入坑.哈哈.你可能抱着好奇心或者疑问.DVWA 是个啥? DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演 ...
- c++注意易错点
1.cout采用endl,cin不用endl cin>>a>>b; cout<<a<<b<<endl; 2.函数定义后面不要加分号,完了也没 ...
- animate动画效果
$(selector).animate({params},speed,callback); 转载:https://www.runoob.com/jquery/jquery-animate.html j ...
- mybatis配置文件详解
这是我看到的博文中最全的一篇了 参见:https://www.cnblogs.com/black-spike/p/7765732.html
- python 装饰器前之闭包和装饰器
装饰器: 一, 例如: # vim yue7.py def foo(): print ("fool-------------------") foo() 运行: [root@l ...