jquery.range.js左右滑动选取数值插件，动态改变进度。
作为一个初级前端工作人员，我最近在做一个关于直播的项目，其中一个功能要求是设置延迟时间， 所以就用到了jquery.range.js这个插件。插件中设置$(".single-slider")的value值可以控制进度条的位置。可是我要根据一开始你传给后台的时间值来动态改变进度条的位置，这样插件就无法满足我的要求了。比如：当你在js代码中改变了$(".single-slider")的value值时，进度条的位置并不会跟着变化。所以花了几十分钟研究了一下源代码，发现只要简单的改变一下他的返回值就能达到要求了。同样还可以绑定其他一些事件。详细步骤如下：
1、如果你没有动过源代码的话，应该是332行，把 return result || this 改成 return result || this.data('plugin_' + pluginName);
其原理是把返回值变成jquery对象。
2、给$('.single-slider').jRange({})重新命名一下 即 test = $('.single-slider').jRange({}),当然别忘了在最开始var一下test；
3、在需要改变进度条的地方调用setValue方法，方法来源于如下图：
方法调用方式为（点击修改value值）：
ps:我当时用的是旧版本，目前版本直接调用$('.slider').jRange('setValue', '10')即可（从评论中才知）;
附demo代码：
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>drag</title>
<link rel="stylesheet" href="../css/jquery.range.css">
<script src="../js/jquery-3.1.0.min.js"></script>
<script src="../js/jquery.range.js"></script>
<head>
<style>
.highlighttext{
background-color:yellow;
font-weight:bold;
}
.demo{
display: inline-block;
}
#g1{
margin: 40px auto;
}
</style> </head>
<body>
<div class="dragTime_box">
<span>延时：</span>
<div class="demo">
<input type="hidden" class="single-slider" value="5" />
</div>
<span>分钟</span>
<button id="g1">获取值</button>
</div>
<input type="button" value="改变值" id="changeValue">
<script>
var test;
$(function () {
test = $('.single-slider').jRange({
from: 0,
to: 30,
step: 1,
scale: [0, 10, 20, 30],
format: '%s',
width: 224,
showLabels: true,
showScale: true
}); $("#g1").click(function () {
var aa = $(".single-slider").val();
alert(aa);
});
}); $('#changeValue').click(function(){
test.setValue(10);
});
</script>
</body>
</head>
</html>
jquery.range.js左右滑动选取数值插件，动态改变进度。的更多相关文章
- jQuery滑动选取数值范围插件
HTML 首先载入jQuery库文件以及jRange相关的css文件:jquery.range.css和插件:jquery.range.js <script src="jquery.j ...
- 转: jquery.qrcode.js生成二维码插件&转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
- jquery.SuperSlide.js只需要调用一个插件就能实现网页大部分特效--推荐
很棒的一个插件,http://www.superslide2.com/
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880
- js 输出语句document.write()及动态改变元素中内容innerHTML的使用
操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...
- 基于jQuery开发的手风琴插件 jquery.accordion.js
1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...
- js-数字渐增到指定的数字，在指定的时间内完成（有动画效果哦）插件jquery.animateNumber.js
本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好. 但是,最终效果不理想! Why? 最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个 ...
- jquery.pagination.js的使用
html页面 //要显示内容表格 <table id="gifts"> <tr class='first'> <th>时间</th> ...
随机推荐
- grunt的基本概念和使用
grunt的基本概念和使用 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版 ...
- 使用Scala操作Mongodb
介绍 Scala是一种功能性面向对象语言.它融汇了很多前所未有的特性.而同一时候又执行于JVM之上.随着开发人员对Scala的兴趣日增,以及越来越多的工具支持,无疑Scala语言将成为你手上一件不可缺 ...
- 快速构建Windows 8风格应用25-数据绑定
原文:快速构建Windows 8风格应用25-数据绑定 本篇博文主要介绍如何将UI元素与数据进行绑定.数据绑定的方向.数据更改通知.数据转换.数据绑定支持的绑定方案. 数据绑定是一种简单方式来显示数据 ...
- openwrt的默认/etc/config/network文件是如何生成的？
openwrt的network文件,或者说在/etc/config下的文件,都是动态生成的. 脚本的函数定义在openwrt1407/package/base-files/files/lib/func ...
- [WebGL入门]十六，绘制多个模型
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家 ...
- 使用Windows2003创建DHCP服务器 - 进阶者系列 - 学习者系列文章
Windows 2003提供的DHCP服务还是挺强大的.下面大概介绍下DHCP服务器的配置. 1. 通过控制面板安装DHCP服务 2. 打开DHCP配置项 3. 选择 新建作用域 4. 输入名 ...
- 《Programming Hive》读书笔记（两）Hive基础知识
<Programming Hive>读书笔记(两)Hive基础知识 :第一遍读是浏览.建立知识索引,由于有些知识不一定能用到,知道就好.感兴趣的部分能够多研究. 以后用的时候再具体看.并结 ...
- WCF 服务端异常封装
通常WCF服务端异常的详细信息只有在调试环境下才暴露出来,但我目前有需求需要将一部分异常的详细信息传递到客户端,又需要保证一定的安全性. 最简单的办法当然是在服务端将异常捕获后,序列化传给客户端,但这 ...
- EF6.0执行sql存储过程案例
数据填充实体:ZF_Btns; 存储过程名称:test; --方式一: db.Database.SqlQuery<ZF_Btns>("test @Id,@UName output ...
- jquery表格datagrid单元格显示图片及分页使用
要想达到自定义显示表格框的目的比如显示图片,超链接,按钮的形式,只需要给列添加formatter属性即可,比如显示图片: columns: [[ ...