bootstrapslider滚动条效果
效果:
⽤bootstrap 的slider实现拉条的效果
效果
html代码:
<div class="item"><span>⼀号灯  </span>
<a class = "btn btn-xs" title="⼀号灯"><div id="lamp_close"  value="1"></div></a>
<input id="ex1" type="text" data-slider-id="ex1Slider" class="span2" value="" data-slider-min="60" data-slider-max="254" data-slider-step="1" data-slider-valu    </div>
jquery:
<script>
$(function () {
var val = $(".btn-xs").find('div').attr('value');
if(val == 1){
$('#ex1').slider({
}).on('slideStop', function (e) {//点击或拉动滚动条后,获取停⽌时滚动条参数传送到控制器
//获取新值
console.log(e.value);
num = e.value;
html滚动效果代码$.ajax({
url : "index/turnon",//具体的url 根据项⽬的路径⾃⼰调下
type : 'post',
data : {"eid":id,"num":num,"status":status},
dataType : 'json',
async : false,
success : function(date){
if(date){
console.sult);
//alert("操作成功");
}
},
error : function(){
//alert("操作失败");
}
});
});
}else{
$('#ex1').slider({
enabled:false//灯未亮时,⽆法操作滚动条
});
}
})
</script>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。