作为一个初级前端工作人员，我最近在做一个关于直播的项目，其中一个功能要求是设置延迟时间， 所以就用到了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. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 文件夹

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 文件夹 第一部分--開始使用SharePoint 2013 第1章节--SharePoint 2013 介绍 逐渐了解Sh ...

  2. SQL点滴35—SQL语句中的exists

    原文:SQL点滴35-SQL语句中的exists 比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,CompanyName FROM Customers c WHE ...

  3. POJ 3380 最大流

    Paratroopers Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  4. VS2015 Apache Cordova

    VS2015 Apache Cordova第一个Android和IOS应用   前言 本人个人博客原文链接地址为http://aehyok.com/Blog/Detail/75.html. http: ...

  5. MvcPager分页控件以适用Bootstrap

    随笔- 9  文章- 0  评论- 33  修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)   软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPag ...

  6. NET Socket服务编程

    smark https://github.com/IKende/ .NET Socket服务编程之-高效连接接入编 在.NET上编写网络服务深入都有2,3年了,而这些时间时如何在.NET里实现网络服务 ...

  7. 游戏开发常用JS

    游戏插件:cocos2d,createjs,webGl(3d),three.js(3d插件) web插件:Bootstrap插件.less尽量写在服务端. chart.js:精巧的js图标绘制工具库

  8. JQuery Smart UI

    JQuery Smart UI 个人开发的一套使用htm+js的开发框架 SmartUI2.0后续声明 摘要: 感谢很多朋友关注,因为今年一直在另外一个公司做顾问,网络环境管制相当严格,所以一直没有更 ...

  9. [转]C# and the using Statement in 3 seconds and a bug in Reflector

    Using() Statement in 3 seconds and a bug in Reflector The boring, known accross the board definition ...

  10. Remoting接口测试工具

    动手写一个Remoting接口测试工具 基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本 ...