当前位置： 移动技术网 > IT编程>网页制作>CSS > bootstrap-switch开关控件基本实例讲解

bootstrap-switch开关控件基本实例讲解

2019年04月30日  | 移动技术网IT编程  | 我要评论

超m自缚痴女下载,王睿卓 爱要坦荡荡,96pk梦幻修仙

基本实例：

<!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;
        }
    }

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网