jQuery实现可拖动控制进度条

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>jQuery可拖动控制进度条</title><style type="text/css">.demo {width: 350px;margin: 100px auto 10px auto}#g1,#g2 {margin-top: 50px}</style><link rel="stylesheet" href="css/jquery.range.css" /><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.range.js"></script><script type="text/javascript">$(function() {$('.single-slider').jRange({from: 0,to: 10,step: 1,width: 200,showLabels: true,showScale: true});});</script></head><body><div class="demo"><input type="hidden" class="single-slider" value="5" /></div></body>
</html>

css

.slider-container .back-bar {height: 10px;position: relative;
}.slider-container .back-bar .selected-bar {position: absolute;height: 100%;
}.slider-container .back-bar .pointer {position: absolute;width: 10px;height: 10px;background-color: red;cursor: col-resize;opacity: 1;z-index: 2;
}.slider-container .back-bar .pointer-label {position: absolute;top: -17px;font-size: 8px;background: white;white-space: nowrap;line-height: 1;
}.slider-container .back-bar .focused {z-index: 10;
}.slider-container .scale {top: 2px;position: relative;
}.slider-container .scale span {position: absolute;height: 5px;border-left: 1px solid #999;font-size: 0;
}.slider-container .scale ins {font-size: 9px;text-decoration: none;position: absolute;left: 0;top: 5px;color: #999;line-height: 1;
}.theme-green .back-bar {height: 15px;border-radius: 2px;background-color: #eeeeee;background-color: #e7e7e7;
}.theme-green .back-bar .selected-bar {border-radius: 2px;background-color: #a1fad0;
}.theme-green .back-bar .pointer {width: 14px;height: 25px;top: -5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background-color: #e7e7e7;
}

jquery.range.js

/*jshint multistr:true, curly: false */
/*global jQuery:false, define: false */
/*** jRange - Awesome range control** Written by* ----------* Nitin Hayaran (nitinhayaran@gmail.com)** Licensed under the MIT (MIT-LICENSE.txt).** @author Nitin Hayaran* @version 0.1-RELEASE** Dependencies* ------------* jQuery (http://jquery.com)***/
;
(function($, window, document, undefined) {'use strict';var jRange = function() {return this.init.apply(this, arguments);};jRange.prototype = {defaults: {onstatechange: function() {},isRange: false,showLabels: true,showScale: true,step: 1,format: '%s',theme: 'theme-green',width: 300,disable: false},template: '<div class="slider-container">\<div class="back-bar">\<div class="selected-bar"></div>\<div class="pointer low"></div><div class="pointer-label">123456</div>\<div class="pointer high"></div><div class="pointer-label">456789</div>\<div class="clickable-dummy"></div>\</div>\<div class="scale"></div>\</div>',init: function(node, options) {this.options       = $.extend({}, this.defaults, options);this.inputNode     = $(node);this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : this.options.from);this.domNode       = $(this.template);this.domNode.addClass(this.options.theme);this.inputNode.after(this.domNode);this.domNode.on('change', this.onChange);this.pointers      = $('.pointer', this.domNode);this.lowPointer    = this.pointers.first();this.highPointer   = this.pointers.last();this.labels        = $('.pointer-label', this.domNode);this.lowLabel      = this.labels.first();this.highLabel     = this.labels.last();this.scale         = $('.scale', this.domNode);this.bar           = $('.selected-bar', this.domNode);this.clickableBar  = this.domNode.find('.clickable-dummy');this.interval      = this.options.to - this.options.from;this.render();},render: function() {// Check if inputNode is visible, and have some width, so that we can set slider width accordingly.if (this.inputNode.width() === 0 && !this.options.width) {console.log('jRange : no width found, returning');return;} else {this.domNode.width(this.options.width || this.inputNode.width());this.inputNode.hide();}if (this.isSingle()) {this.lowPointer.hide();this.lowLabel.hide();}if (!this.options.showLabels) {this.labels.hide();}this.attachEvents();if (this.options.showScale) {this.renderScale();}this.setValue(this.options.value);},isSingle: function() {if (typeof(this.options.value) === 'number') {return true;}return (this.options.value.indexOf(',') !== -1 || this.options.isRange) ?false : true;},attachEvents: function() {this.clickableBar.click($.proxy(this.barClicked, this));this.pointers.on('mousedown touchstart', $.proxy(this.onDragStart, this));this.pointers.bind('dragstart', function(event) {event.preventDefault();});},onDragStart: function(e) {if ( this.options.disable || (e.type === 'mousedown' && e.which !== 1)) {return;}e.stopPropagation();e.preventDefault();var pointer = $(e.target);this.pointers.removeClass('last-active');pointer.addClass('focused last-active');this[(pointer.hasClass('low') ? 'low' : 'high') + 'Label'].addClass('focused');$(document).on('mousemove.slider touchmove.slider', $.proxy(this.onDrag, this, pointer));$(document).on('mouseup.slider touchend.slider touchcancel.slider', $.proxy(this.onDragEnd, this));},onDrag: function(pointer, e) {e.stopPropagation();e.preventDefault();if (e.originalEvent.touches && e.originalEvent.touches.length) {e = e.originalEvent.touches[0];} else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {e = e.originalEvent.changedTouches[0];}var position = e.clientX - this.domNode.offset().left;this.domNode.trigger('change', [this, pointer, position]);},onDragEnd: function(e) {this.pointers.removeClass('focused');this.labels.removeClass('focused');$(document).off('.slider');},barClicked: function(e) {if(this.options.disable) return;var x = e.pageX - this.clickableBar.offset().left;if (this.isSingle())this.setPosition(this.pointers.last(), x, true, true);else {var pointer = Math.abs(parseInt(this.pointers.first().css('left'), 10) - x + this.pointers.first().width() / 2) < Math.abs(parseInt(this.pointers.last().css('left'), 10) - x + this.pointers.first().width() / 2) ?this.pointers.first() : this.pointers.last();this.setPosition(pointer, x, true, true);}},onChange: function(e, self, pointer, position) {var min, max;if (self.isSingle()) {min = 0;max = self.domNode.width();} else {min = pointer.hasClass('high') ? self.lowPointer.position().left + self.lowPointer.width() / 2 : 0;max = pointer.hasClass('low') ? self.highPointer.position().left + self.highPointer.width() / 2 : self.domNode.width();}var value = Math.min(Math.max(position, min), max);self.setPosition(pointer, value, true);},setPosition: function(pointer, position, isPx, animate) {var leftPos,lowPos = this.lowPointer.position().left,highPos = this.highPointer.position().left,circleWidth = this.highPointer.width() / 2;if (!isPx) {position = this.prcToPx(position);}if (pointer[0] === this.highPointer[0]) {highPos = Math.round(position - circleWidth);} else {lowPos = Math.round(position - circleWidth);}pointer[animate ? 'animate' : 'css']({'left': Math.round(position - circleWidth)});if (this.isSingle()) {leftPos = 0;} else {leftPos = lowPos + circleWidth;}this.bar[animate ? 'animate' : 'css']({'width': Math.round(highPos + circleWidth - leftPos),'left': leftPos});this.showPointerValue(pointer, position, animate);this.isReadonly();},// will be called from outsidesetValue: function(value) {var values = value.toString().split(',');this.options.value = value;var prc = this.valuesToPrc(values.length === 2 ? values : [0, values[0]]);if (this.isSingle()) {this.setPosition(this.highPointer, prc[1]);} else {this.setPosition(this.lowPointer, prc[0]);this.setPosition(this.highPointer, prc[1]);}},renderScale: function() {var s = this.options.scale || [this.options.from, this.options.to];var prc = Math.round((100 / (s.length - 1)) * 10) / 10;var str = '';for (var i = 0; i < s.length; i++) {str += '<span style="left: ' + i * prc + '%">' + (s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '') + '</span>';}this.scale.html(str);$('ins', this.scale).each(function() {$(this).css({marginLeft: -$(this).outerWidth() / 2});});},getBarWidth: function() {var values = this.options.value.split(',');if (values.length > 1) {return parseInt(values[1], 10) - parseInt(values[0], 10);} else {return parseInt(values[0], 10);}},showPointerValue: function(pointer, position, animate) {var label = $('.pointer-label', this.domNode)[pointer.hasClass('low') ? 'first' : 'last']();var text;var value = this.positionToValue(position);if ($.isFunction(this.options.format)) {var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low' : 'high');text = this.options.format(value, type);} else {text = this.options.format.replace('%s', value);}var width = label.html(text).width(),left = position - width / 2;left = Math.min(Math.max(left, 0), this.options.width - width);label[animate ? 'animate' : 'css']({left: left});this.setInputValue(pointer, value);},valuesToPrc: function(values) {var lowPrc = ((values[0] - this.options.from) * 100 / this.interval),highPrc = ((values[1] - this.options.from) * 100 / this.interval);return [lowPrc, highPrc];},prcToPx: function(prc) {return (this.domNode.width() * prc) / 100;},positionToValue: function(pos) {var value = (pos / this.domNode.width()) * this.interval;value = value + this.options.from;return Math.round(value / this.options.step) * this.options.step;},setInputValue: function(pointer, v) {// if(!isChanged) return;if (this.isSingle()) {this.options.value = v.toString();} else {var values = this.options.value.split(',');if (pointer.hasClass('low')) {this.options.value = v + ',' + values[1];} else {this.options.value = values[0] + ',' + v;}}if (this.inputNode.val() !== this.options.value) {this.inputNode.val(this.options.value);this.options.onstatechange.call(this, this.options.value);}},getValue: function() {return this.options.value;},isReadonly: function(){this.domNode.toggleClass('slider-readonly', this.options.disable);},disable: function(){this.options.disable = true;this.isReadonly();},enable: function(){this.options.disable = false;this.isReadonly();},toggleDisable: function(){this.options.disable = !this.options.disable;this.isReadonly();}};/*$.jRange = function (node, options) {var jNode = $(node);if(!jNode.data('jrange')){jNode.data('jrange', new jRange(node, options));}return jNode.data('jrange');};$.fn.jRange = function (options) {return this.each(function(){$.jRange(this, options);});};*/var pluginName = 'jRange';// A really lightweight plugin wrapper around the constructor,// preventing against multiple instantiations$.fn[pluginName] = function(option) {var args = arguments,result;this.each(function() {var $this = $(this),data = $.data(this, 'plugin_' + pluginName),options = typeof option === 'object' && option;if (!data) {$this.data('plugin_' + pluginName, (data = new jRange(this, options)));$(window).resize(function() {data.setValue(data.getValue());}); // Update slider position when window is resized to keep it in sync with scale}// if first argument is a string, call silimarly named function// this gives flexibility to call functions of the plugin e.g.//   - $('.dial').plugin('destroy');//   - $('.dial').plugin('render', $('.new-child'));if (typeof option === 'string') {result = data[option].apply(data, Array.prototype.slice.call(args, 1));}});// To enable plugin returns valuesreturn result || this;};})(jQuery, window, document);

效果

查看全文

http://www.taodudu.cc/news/show-5455939.html

jquery ajax加载页面进度条,基于jQuery实现模拟页面加载进度条
jquery 简单的进度条实现代码
postgresql 客户端导入csv文件命令格式
Linux安装PostgreSQL（在线安装）
Android Http请求网络HttpClient和HttpUrlConnection
android httpclient单例模式
android之http,android之HttpClient
Android HTTP协议请求网络(二)之HttpClient方式
Android View 详解
把库文件从msvc格式（.lib）转化成MinGW格式（.a）的方法。
VS2010SP1安装卡在VS10Sp1-KB983509处的解决
绘图杂记【2】使用Python/R语言对柱形图、饼图进行纹理填充
halcon 19.05 linux x64
启用XPS viewer，打印为xps, 另存为pdf
Jquery blockUI用法
处理器（计组课程）
java计算机毕业设计图书馆座位预约管理系统源代码+数据库+系统+lw文档
基于JAVA图书馆座位预约管理系统服务端计算机毕业设计源码+数据库+lw文档+系统+部署
matlab formatts,matlab求解二次方程组clearformatsyms Ls Lw Ts Tb Te Tc Tns Tn Tp Q P
JAVA毕业设计计算机office课程平台计算机源码+lw文档+系统+调试部署+数据库
Python3 完美解决unittest框架下不生成测试报告
Web UI 自动化测试框架 seldom
python自动化-找到最新生成的测试报告文件
用Ant批量运行TestNG测试用例，并配合Reportng实现报告美化
JMeter使用Ant生成测试报告
pytest使用详解
day13:Python单元测试(TestCase,TestSuit,TestLoader,TestReport)
JS中的if语句失效
Java有if没有else_错误：'else'没有'if'
pythonif嵌套层数太多怎么办_优化过多的if else嵌套

jQuery实现可拖动控制进度条相关推荐

8款效果精美的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
android 斑马线进度条,jQuery简单斑马线样式loading进度条动画特效
这是一款非常简单实用的jQuery斑马线样式loading进度条动画特效.该进度条特效通过简单的jQuery代码就完成了可控制的进度条动画特效.斑马线效果使用CSS3来完成,对不支持CSS3的浏览器可 ...
ajax百分比加载特效,jQuery实现的简单百分比进度条效果示例
本文实例讲述了jQuery实现的简单百分比进度条.分享给大家供大家参考,具体如下: 一.JS Code: var progressId = "ProgressBarID"; fun ...
jquery文件上传插件|进度条
jquery文件上传插件|进度条一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
使用HTML5多媒体,audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频. 小知识:视频文件包含了音频轨道,视频轨道和其他一些元数据.当我们播放视频的时候, ...
B站不能拖动视频进度条问题
B站不能拖动视频进度条问题关闭网页自由复制.网页限制类插件即可
android会员等级进度条,利用jQuery实现会员等级消费进度条代码
特效描述:利用jQuery实现会员等级消费进度条代码.利用jQuery实现会员等级消费进度条代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 $(function(){ var ...
EV录屏/向日葵文件播放没有声音问题，不能拖动时间进度条
环境: EV录屏 4.2.2 potplayer 版本:230523(1.7.21916) 问题: 使用potplayer 播放录屏文件只能从头开始播放,如果拖动时间进度条,要么无法播放,要么没有声音 ...

jQuery实现可拖动控制进度条

相关文章：

jQuery实现可拖动控制进度条相关推荐

最新文章

热门文章