申请达人，去除赞助商链接
如果大家也在使用
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://juanmendez.info/source/library/jqueryui/jquery-ui-1.10.3.mouse_core.jsTouch:
http://juanmendez.info/source/tutorial/bootstrap/slider/jquery.ui.touch-punch.jsBootStrap:
http://getbootstrap.com/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="//www.gbtags.com/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
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
