bootstrap-switch开关控件基本实例讲解
程序员文章站
2022-06-11 15:48:58
基本实例：
基本实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>bootstrap开关实例</title>
<link href="bt/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-switch.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="bt/js/bootstrap.min.js"></script>
<script src="js/bootstrap-switch.min.js"></script>
</head>
<body>
<p class="container">
<form action="">
<p class="form-group">
<input name="status" type="checkbox" data-size="small">
</p>
</form>
<script type="text/javascript">
$(function(){
$('[name="status"]').bootstrapswitch({
ontext:"启动",
offtext:"停止",
oncolor:"success",
offcolor:"info",
size:"small",
onswitchchange:function(event,state){
var status = $(this).val();
if(state==true){
alert(status);
}else{
alert(status);
}
}
})
});
</script>
</p>
</body>
</html>
tp的volist中判断
<input type="checkbox" name="status" data-size="small" data-id="{$vo.r_id}" {$vo.r_status==1?'checked':''}>
情况描述：我的数据列表中有多行，每行都有一个switich开关，我要根据查询的status值来显示bootstrap-switch开关的初始状态（即开、关状态）。
起初试了一下，input标签加上checked属性就会显示开启状态，去掉checked属性显示关闭状态。
点击切换状态的实现方式
//开关操作
$(function(){
$('[name="status"]').bootstrapswitch({
ontext:"启动",
offtext:"停止",
oncolor:"success",
offcolor:"info",
size:"small",
onswitchchange:function(event,state){
var eid = $(this).data("id");
// alert(id);return false;
if(state==true){
//开启
console.log("开启");
$.post('{:url("role/editstatus")}', {eid: eid}, function(data) {
});
}else{
//关闭
console.log("关闭");
$.post('{:url("role/editstatus")}', {eid: eid}, function(data) {
});
}
}
})
});
tp的控制器方法
//修改状态
public function editstatus()
{
$eid = input("eid");
//先得到要修改的状态的status值
$status = db::name("role")
->where(['r_id'=>$eid])
->value('r_status');
if ($status == 1) {
//状态改为关闭
$res = db::name("role")
->where(['r_id'=>$eid])
->update(['r_status'=>0]);
return 1;
} elseif ($status == 0) {
//状态改为开启
$res = db::name("role")
->where(['r_id'=>$eid])
->update(['r_status'=>1]);
return 1;
}
}