作为一个初级前端工作人员，我最近在做一个关于直播的项目，其中一个功能要求是设置延迟时间， 所以就用到了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. angular.js的一点理解

    对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...

  2. C# 字符串加密解密函数

    原文:C# 字符串加密解密函数 using System; using System.Text;using System.Security.Cryptography; using System.IO; ...

  3. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

  4. 转载：Linux Used内存到底到哪里去了？

    转自:http://blogread.cn/it/article/6264?f=wb2 有时在Linux下会碰到这样的问题:ps aux看到的RSS内存只有不到30M,但是free看到内存却已经使用了 ...

  5. jquery-制作选项卡

    强大的jquery-制作选项卡   最近在学习jquery,特地把今天写的一个选项卡源码贴出来.只是做只是梳理,大神们请不要吐槽,如果有更好的方法,欢迎指点.谢谢. css <style> ...

  6. 使用AdvancedInstaller打包web工程设置tomcat端口的方法

    原文:使用AdvancedInstaller打包web工程设置tomcat端口的方法 1.首先,要把你要打包的tomcat下的server.xml文件删掉,因为tomcat自带的serv ...

  7. ODBC操作excel

    //ODBC连接Excel public static void main(String[] args) {  Connection conn = null;  Statement stm = nul ...

  8. 最短路径 dijkstra

    最短路径 dijkstra #include <stdio.h> #include <string.h> #include <limits.h> #define M ...

  9. 附加被分离DB

    如何附加被分离的质疑数据库?   简介 有些时间,由于日志损坏等原因,导致了数据库质疑.如果此时你分离了数据库,那你会发现你无法再附加上数据库,那后果还是很严重的.因此本文提供了一种方式,可以使得当数 ...

  10. C#.Net获取Mac等PC信息

    using System.Management; using System.Net; public class PCInfoHelper { /// <summary> /// 操作系统的 ...