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

    一.UITextField的代理方法 #pragma mark 当文本框开始编辑的时候调用---开始聚焦 - (void)textFieldDidBeginEditing:(UITextField * ...

  2. [SQLXML]FOR XML语法导出XML的易错之处

    原文:[SQLXML]FOR XML语法导出XML的易错之处 [SQLXML]FOR XML语法导出XML的易错之处 Version Date Creator Description 1.0.0.1 ...

  3. C# 之 托付

    托付(delegate)     托付是一种能够把引用存储为函数的类型.托付也能够看成是一种数据类型,能够用于定义变量,但它是一种特殊的数据类型,它所定义的变量能接受的数值仅仅能是一个函数,更确切的说 ...

  4. python学习笔记（五岁以下儿童）深深浅浅的副本复印件，文件和文件夹

    python学习笔记(五岁以下儿童) 深拷贝-浅拷贝 浅拷贝就是对引用的拷贝(仅仅拷贝父对象) 深拷贝就是对对象的资源拷贝 普通的复制,仅仅是添加了一个指向同一个地址空间的"标签" ...

  5. 接口自动化测试：参数化封装(excel文件读取)

    log4j.properties文件配置 log4j.rootLogger = DEBUG,stdout,F log4j.appender.stdout = org.apache.log4j.Cons ...

  6. cocos2d-x-lua基础系列教程三（lua面向对象）

    lua 类 Lua 事实上不是面向对象语言 我们能够用table 模拟仿照面向对象编程 lua 中的this 类似的是self  table 也具有生命周期 2,使用table  创建类 projed ...

  7. 空连接ipc$入侵

    使用命令 net use url=file://\\IP\ipc$\\IP\ipc$ "" /user:"" 就可以简单地和目标建立一个空连接(需要目标开放ip ...

  8. struts2注解redirect传递参数解决方案时，中国的垃圾问题

    struts2注解redirect传递参数解决方案时,中国的垃圾问题 试过很多方法  tomcat 编码  .字符串转换 .URLEncoder  .. 但是,没有解决方案,然后仔细阅读   stru ...

  9. linux学习书籍

    linux学习书籍推荐 网上看到的,做个标记.没研究过,仅供参考  linux编程学习   inux 学习书目推荐 Linux基础 1.<Linux与Unix Shell 编程指南> C语 ...

  10. 高速决心linux上oracle安装垃圾问题

    问题:在linux安装oracle时间.因为oracle用户local LANG安装问题,原因安装oracle软件.该接口是非常多的安装位置是乱码. 解决方案:在oracle用户运行:export L ...