作为一个初级前端工作人员，我最近在做一个关于直播的项目，其中一个功能要求是设置延迟时间， 所以就用到了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左右滑动选取数值插件，动态改变进度。的更多相关文章

  1. jQuery滑动选取数值范围插件

    HTML 首先载入jQuery库文件以及jRange相关的css文件:jquery.range.css和插件:jquery.range.js <script src="jquery.j ...

  2. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  3. jquery.SuperSlide.js只需要调用一个插件就能实现网页大部分特效--推荐

    很棒的一个插件,http://www.superslide2.com/

  4. 使用Jquery.form.js ajax表单提交插件弹出下载提示框

    现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...

  5. jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果

    http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880

  6. js 输出语句document.write()及动态改变元素中内容innerHTML的使用

    操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...

  7. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

  8. js-数字渐增到指定的数字，在指定的时间内完成（有动画效果哦）插件jquery.animateNumber.js

    本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好. 但是,最终效果不理想! Why? 最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个 ...

  9. jquery.pagination.js的使用

    html页面 //要显示内容表格 <table id="gifts"> <tr class='first'> <th>时间</th> ...

随机推荐

  1. Quartz使用-入门使用(java定时任务实现)

    注:这里使用的是Quartz1.6.5版本号(包:quartz-1.6.5.jar) //測试main函数 //QuartzTest.java package quartzPackage; impor ...

  2. C# 通过ImportNode AppendChild方法合并XmlDocument，XML转为DataTable

    var doc1 = new XmlDocument(); var doc2 = new XmlDocument(); XmlNode root1 = doc1.DocumentElement; do ...

  3. HDU 4324 Triangle LOVE 拓扑排序

    Problem Description Recently, scientists find that there is love between any of two people. For exam ...

  4. 一步一步写算法（之prim算法 下）

    原文:一步一步写算法(之prim算法 下) [ 声明:版权所有,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 前两篇博客我们讨论了prim最小生成树的算法,熟悉 ...

  5. loadrunner常用函数总结

    事务函数:lr_end_sub_transaction 标记子事务的结束以便进行性能分析lr_end_transaction 标记 LoadRunner 事务的结束lr_end_transaction ...

  6. 出现Deprecated: Function ereg_replace() is deprecated in 的原因及解决方法

    在 php5.3环境下运行oscommerce,常常会出现Deprecated: Function ereg() is deprecated in...和Deprecated: Function er ...

  7. 推荐两个针对github的chrome插件

    作为一只程序猿,在github上找代码.看代码是再正常不过的事情了.这时候有个工具可以方便你翻看代码,想必是极好的. Sourcegraph for GitHub 这个插件允许你像使用IDE那样浏览代 ...

  8. OCP-1Z0-051-题目解析-第12题

    12. You need to produce a report where each customer's credit limit has been incremented by $1000. I ...

  9. OCP-1Z0-051-题目解析-第5题

    5. Which SQL statements would display the value 1890.55 as $1,890.55? (Choose three .) A. SELECT TO_ ...

  10. C语言两个libxml2库使用的问题

    最近使用libxml2想做点东西,翻看一些example后还是有些疑问,去segmentfault问了下,感谢@pingjiang的热心解答,问题解决,记录如下 (一)如下是一个XML文件,p为根结点 ...