滑动进度条小插件

功能:
1.可对进度条进行设置,
2.可滑动进度条,
4.可设置进度条名
5.可修改其颜色.

插件效果图如下:

滑动进度条小插件_第1张图片

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('
' +'
' +'
' +'
'value'] +'">' +'' +'
' +'
'
+'
' +''+ defaultValue['name'] +':'+defaultValue['value'] +'%' +'
'
+'
'
+'
'
+'
'
+'
'
+'' +'
'
); 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));

你可能感兴趣的:(js,jQuery)