强化Bootstrap 3的进度条组件 - Bootstrap3 Slider

如果大家也在使用Bootstrap3的话，应该有机会使用到其中的progress进度条组件，如下：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

这段代码可以生成静态的进度条效果，如下：

为此我们需要js控制进度条的进度。

但是如果我们希望在项目中使用到类似jQuery UI中Slider组件功能的话，会发现Bootstrap3没有提供相关的组件。

这里我们介绍一个Bootstrap的扩展 - Bootstrap Slider，它能够帮助我们强化progressbar的效果，添加滑动块的功能。

支持设备：

平板电脑
桌面
android手机

类库依赖：

jquery-1.9.1.js
jquery-ui-1.10.3.custom.min.js 支持鼠标交互的jquery ui组件, 可到jquery官网下载
jquery.ui.touch-punch.js 用于移动设备中，支持触控交互
bootstrapslider.js 我们今天介绍的Bootstrap Slider组件 , 可到https://github.com/juanmendez/bootstrap-slider下载

基本使用

效果：

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Bootstrap Slider简单实用</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="bootstrapslider.js"></script>
<style type="text/css">
    .slider-bar{
        display:block; width:80px; background-color:darkred; position:relative;
    }
    .slider, .slider-bar{
        height:30px;
    }
  </style>
</head>

<body>
  <div class="bs-example" >
    <div class="progress slider">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" role="progressbar" class="progress-bar progress-bar-warning"> <span class="sr-only">60%</span>
    </div>
  </div>
</body>
</html>

注意不要忘了加 slider 类样式。

高级使用

另外，该插件还提供了一些方法、事件来设置或者监听进度条的状态。

1。设置参数：最大值、最小值、当前值。

$p = $(".progress);

方法1：$p.slider({max:80, min:0, now:30} );

方法2：$p.slider("option", "now", 20);

$p.slider("option", "max", 90);

另外还可以通过 $p.slider("option", "disabled", true); 进度条的拖动按钮是否可拖动。true：可拖动 false:不可拖动

2。监听事件

提供了俩个事件：

sliderchange：进度条当前值改变时触发

slidercomplete：进度条完成时触发，即当前值到达了最大值，如：100%

实例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Bootstrap Slider高级使用</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="bootstrapslider.js"></script>
<style type="text/css">
    .slider-bar{
        display:block; width:80px; background-color:darkred; position:relative;
    }

    .slider, .slider-bar{
        height:30px;
    }
  </style>
<script type="text/javascript">//<![CDATA[ 

$(function () {

    //for jsfiddle so its mobile friendly.
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

    var $alert = $($(".alert")[0]);
    var $p = $($(".progress")[0]);
    var $b = $($("[type='submit']")[0]);
    var $d = $("#btn_enabled");
    var $t = $("#progress-value");
    
	//监听sliderchange事件
    $p.on("sliderchange", function (e, result) {
	    //显示当前值
        $alert.html("action: " + result.action + ", value: " + result.value);
    });
    //监听slidercomplete事件
    $p.on("slidercomplete", function (e, result) {
        console.log('slider completed!');
    });
    
    //通过$p.slider("option", "now", value);方法设置当前值
    $b.on('click', function (e) {
        var value = parseFloat($t.val());
        $p.slider("option", "now", value);
        return false;
    });
    
	//设置进度条是否可拖动
    $d.on('click', function () {
        if (!$d.hasClass('active')) {
            $d.text('Disabled ');
            $p.slider("option", "disabled", true);
        } else {
            $d.text('Enabled');
            $p.slider("option", "disabled", false);
        }
    });
});
//]]>  

</script>
</head>

<body>
  <div class="bs-example" style="margin:100px; width:600px;">
    <div class="progress slider">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" role="progressbar" class="progress-bar progress-bar-warning"> <span class="sr-only">60%</span>
    </div>
  </div>
  <div class="alert alert-success">hello world</div>
    <div class="form-inline">
        <div class="form-group">
            <input type="number" id="progress-value" min="0" max="100" class="form-control" placeholder="设置当前值">
        </div>
        <div class="btn-group">
            <button type="submit" class="btn btn-default">Update</button>
            <button class="btn btn-default" data-toggle="button" id="btn_enabled">Enabled</button>
        </div>
    </div>
  </div>
</body>
</html>

在文本框中设置当前值，点击update按钮来改变。 Enabled按钮设置是否可以拖动。

好了，完成了。

在线效果可访问：http://jsfiddle.net/juanmendez/v9zkB/

更多详细介绍：https://github.com/juanmendez/bootstrap-slider

支持设备：

类库依赖：

+友情链接