作为一个初级前端工作人员，我最近在做一个关于直播的项目，其中一个功能要求是设置延迟时间， 所以就用到了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. JavaScript两种方法来定义一个函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. expected number,sequence,or string.map evaluated instead of freemarker.template.smplehash

    expected number,sequence,or string.map evaluated instead of freemarker.template.smplehash 使用freemark ...

  3. jquery的使用 关于 option ,append,attr,val()等的使用

    //遍历option和添加.移除option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE ...

  4. android App Widgets

    http://developer.android.com/guide/practices/ui_guidelines/widget_design.html#design http://develope ...

  5. IntelliJ IDEA 发布13版本——创造java奇迹

    IntelliJ IDEA被公认为业界最好的Java开发平台.此次发布的了13版本,更是集合了与Java EE.Android.Spring.Scala和Gradle最新合作与支持. Java EE  ...

  6. Visual Studio 2012使用水晶报表Crystal Report

    原文:Visual Studio 2012使用水晶报表Crystal Report SAP在 2013年1月14日 released SAP Crystal Reports,developer ver ...

  7. 使用JSmooth制造java jar文件可以运行exe文件教程图像

    这是我之前在个人博客3yj上面写的一篇文章,如今转载过来,原文地址 (这不是广告哦) 几年前,刚接触java的是.就想用一些方法把自己的劳动果实保护起来,曾经也用过非常多这种工具.有一个特别好用,今天 ...

  8. QTP使用技巧

    1QTP基本功能的使用 QTP的基本功能包括两大部分:一部分是提供给初级用户使用的关键字视图:另一部分是提供给熟悉VBScript脚本编写的自动化测试工程师使用的专家视图.但是,并没有严格的区分,在实 ...

  9. 列表类型转换(ConvertList<TSource, TResult>)

    性能优化-列表类型转换(ConvertList<TSource, TResult>) 2013-12-16 16:55 by stevey, 426 阅读, 7 评论, 收藏, 编辑 之前 ...

  10. knockoutJS 快速上手

    翻译:Knockout 快速上手 - 3: knockoutJS 快速上手 许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用 ...