强化Bootstrap 3的进度条组件

申请达人，去除赞助商链接

如果大家也在使用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>

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

我们可以调用如下的jQuery代码来实现动态控制进度条：

$('.progress-bar').css({'width':'80%'}).find('span').html('80%');

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

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

支持设备：

• 平板电脑
• 桌面
• android手机

类库依赖：

• jQuery UI Core : http:///source/library/jqueryui/jquery-ui-1.10.3.mouse_core.js
• Touch: http:///source/tutorial/bootstrap/slider/jquery.ui.touch-punch.js
• BootStrap: http:///dist/js/bootstrap.js

基本功能：

HTML

<div class="progress slider">...</div>

CSS

<style>
    .slider-bar{
        display:block; width:80px; background-color:darkred; position:relative;
    }
 
    .slider, .slider-bar{
        height:30px;
    }
</style>

或者如果你希望使用jQuery代码来生成，请使用如下代码：

$p = $(".progress);
$p.slider({max:100, min:0, now:30} );

生成的滑动块效果如下：

当你鼠标悬浮到滑块上面，然后拖动可以改变进度，截图如下：

这个扩展支持如下的回调函数：

$p.on( "sliderchange", function(e,result){
    console.log( "action: " + result.action + ", value: " + result.value );
});
 
$p.on( "slidercomplete", function(e,result){
    console.log( 'slider completed!' );
});

分别在你拖动滑块和画框拖动进度完成的时候调用，如果你需要使用JS来控制特定组件或者元素的话，这两个callback方法将会非常实用。

回调函数

下面这个代码调试将使用滑块来调整图片的大小，如下：

主要代码：

HTML

<div class="progress slider" id="gbslider">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bar-warning"> <span class="sr-only">50%</span>
    
  </div>
</div>
 
<img src="http://www./gb/networks/themes/img/weixin.jpg" id="img" />

JS

$('#gbslider').on( "sliderchange", function(e,result){
  console.log( "action: " + result.action + ", value: " + result.value );
  $('#img').css({'width': Math.ceil(result.value) + '%'});
});

效果是不是还不错，当然其它还有更多的选择可以帮助你更好的控制，例如，禁用滑块等等，请大家自行查阅相关文章，如果你有更多Bootstrap使用的经验和体验，请与我们分享！

下载地址：https://github.com/juanmendez/bootstrap-slider