滑动进度条小插件
功能：
１．可對進度條進行設置，
２．可滑動進度條，
４．可設置進度條名
５．可修改其顏色．
插件效果圖如下：
Html代碼如下：
<!doctype html> <html> <head><meta charset="utf-8"><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><script src="bar3.js"></script><link rel="stylesheet" type="text/css" href="bar.css"> </head> <body><div class="dis"></div><div id="dis2"></div> </body> <script type="text/javascript">$('.dis').createBar();$('#dis2').createBar({color: '#ff5f71', value: 20, name: '男生'});console.log($('.dis').GetValue()); </script> </html>Css代碼如下：
.progress-box{width: 500px;padding: 15px; } .progress-box .progress-bar-box{height: 8px;overflow: inherit;border-radius: 5px;background: #dddee0;width: 465px;margin-left: 0px; } .progress-box .progress-bar-box .bar-scroll{} .progress-box .progress-bar-box .bar-scroll-box{background-color: #009ddd;position: relative;border-radius: 5px;width: 20%;height: 8px; } .progress-box .progress-bar-box .bar-scroll-box .bar-mark{display: inline-block;width: 20px;height: 20px;background: #fff;position: absolute;top: -6px;right: -10px;border-radius: 50%;border: 2px solid #ccc;box-shadow: 0px 1px 10px #dadada; } .progress-box .progress-bar-box .bar-scroll-box .bar-info{position: absolute;z-index: 1070;display: block;font-size: 12px;line-height: 1.4;visibility: visible;filter: alpha(opacity=0);padding: 5px 5px;margin-top: -3px;color: #fff;right: -39px;top: -37px;min-width: 75px; } .progress-box .progress-bar-box .bar-scroll-box .bar-info .info-arrow{position: absolute;width: 0;height: 0;border-color: transparent;border-style: solid;bottom: 0;left: 50%;margin-left: -5px;border-width: 5px 5px 0;border-top-color: #009ddd; } .progress-box .progress-bar-box .bar-scroll-box .bar-info .info-inner{max-width: 200px;padding: 3px 8px;color: #fff;text-align: center;text-decoration: none;border-radius: 4px;background: #009ddd; }.content-box .intro-box .intro-form-box .form-horizontal .sex-box{margin-bottom: 10px; } .sex-box .progress{height: 8px;overflow: inherit;border-radius: 5px;background: #dddee0;width: 465px;margin-left: 0px; } .sex-box .progress-bar{position: relative;border-radius: 5px; } .sex-box .progress-bar-info{background-color: #009ddd; } .sex-box .progress-bar-danger{background-color: #ff5f71; } .sex-box .progress-flag{display: inline-block;width: 20px;height: 20px;background: #fff;position: absolute;top: -6px;right: -10px;border-radius: 50%;border: 2px solid #ccc;box-shadow: 0px 1px 10px #dadada; } .sex-box .boy-box .tooltip.top{color: #fff;right: -32px;top: -37px; } .sex-box .boy-box .tooltip.top .tooltip-arrow{border-top-color: #009ddd; } .sex-box .boy-box .tooltip.top .tooltip-inner{background: #009ddd; } .sex-box .girl-box .tooltip.top{color: #fff;right: -32px;top: -37px; } .sex-box .girl-box .tooltip.top .tooltip-arrow{border-top-color: #ff5f71; } .sex-box .girl-box .tooltip.top .tooltip-inner{background: #ff5f71;}Js代碼如下：
/*createBar：創建進度條defaluValue：進度條默認參數color：進度條顏色，標簽顏色width：進度條進度name：標簽名稱SetColor：設置顏色GetValue：獲取進度SetValue：設置進度ScrollBarEvent: 滑動進度條 */ (function ($) {$.fn.extend({createBar: function(options) {var defaultValue = { //默認參數color: '#009ddd',value: 0,name: '女生'};if (options != undefined) { //有參數$.each(options, function(n, val) {if (n != null) {defaultValue[n] = val;}});}var $this = $(this);$this.append('<div style="margin-top: 50px; margin-left: 50px;">'+'<div class="progress-box">'+'<div class="progress-bar-box">'+'<div class="bar-scroll-box" data-width="'+ defaultValue['value'] +'">'+'<span class="bar-mark"></span>'+'<div class="bar-info">'+'<div class="info-arrow"></div>'+'<div class="info-inner">'+''+ defaultValue['name'] +'：<span>'+defaultValue['value'] +'</span>%'+'</div>'+'</div>'+'</div>'+'</div>'+'</div>'+'<span class="pro-info"></span>'+'</div>');this.SetColor($this, defaultValue['color']);this.SetValue($this, defaultValue['value']);this.ScrollBarEvent($this);},SetColor: function($box, color) {$box.find('.bar-scroll-box').css('background-color', color);$box.find('.info-inner').css('background-color', color);$box.find('.info-arrow').css('border-top-color', color);},GetValue: function($box) {var $this = $(this);this.currentX = $this.find(".bar-scroll-box").data('width');return this.currentX;},SetValue: function ($box, index) { /*設置進度條的的寬度*/var $bar = $box.find('.bar-scroll-box');if (index === undefined) { //沒有參數index = $bar.data('width');}$bar.css('width', index +'%');$bar.attr('data-width', index);$bar.find('.info-inner').find('span').html(index);},ScrollBarEvent: function($box) {var thisVal = this;var $par = $box.find('.progress-box');var barLeft = $par.offset().left; //進度條的開始點位置;var barWidth = $par.find('.progress-bar-box').width(); //進度條寬度;var scale = barWidth / 100;var barRight = barLeft + barWidth; //進度條的結束點位置;$box.find(".bar-mark").on('mousedown', function () {$box.find('.progress-box').on('mousemove', function (event) {var changeX = event.clientX; //每次移動1px;var currentValue = event.clientX - barLeft; //當前移動的位置if (changeX >= barLeft && changeX <= barRight){currentValue = currentValue /scale;thisVal.SetValue($box, Math.round(currentValue));} }); });$(document.body).mouseup(function () {$box.find('.progress-box').off('mousemove');});}}); }(jQuery));總結
- 上一篇： 前端兼容性问题
- 下一篇： python web django ba