码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-switch,切换触发事件及动态切换

时间:2019-07-17 00:36:15      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:idt   标题   trap   margin   介绍   引入   lib   center   cli   

在项目中有个地方要用到一个开关,就找了一下发现boostrap-switch这个插件比较符合要求,网上查了不少资料也踩了不少坑。

因为主要就用到标题中两个功能,所以就在这里介绍一下

以下是一个简单的demo。其中js,css都是在线引入复制即可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <style>
        .center{
            text-align: center;
            margin-top: 100px;
        }
        #state{
            font-size: 20px;
            color: black;
            font-family: "Adobe 黑体 Std R";
            font-weight: bold;
        }
        .btn{
            width: 60px;
        }
    </style>
</head>
<body>
    <div class="center">
        <input type="checkbox" name="switch">
        <p id="state"></p><br>
        <button type="button" class="btn btn-primary" id="on">on</button>
        <button type="button" class="btn btn-warning" id="off">off</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<script>

    $("input[name=‘switch‘]").bootstrapSwitch({
        onText: "开启",
        offText: "关闭",
        onSwitchChange: function (event, state) {
            //监听switch change事件,可以根据状态把相应的业务逻辑代码写在这里
            if (state == true) {
                $("#state").html(‘switch turn no‘)
            } else {
                $("#state").html(‘switch turn off‘)
            }
        }
    })
    //两个按钮点击动态切换bootsrap开关状态
    $("#on").click(function(e){
        $("input[name=‘switch‘]").bootstrapSwitch("state",true);
    })

    $("#off").click(function(e){
        $("input[name=‘switch‘]").bootstrapSwitch("state",false);
    })
</script>
</html>

  

技术图片

 

bootstrap-switch,切换触发事件及动态切换

标签:idt   标题   trap   margin   介绍   引入   lib   center   cli   

原文地址:https://www.cnblogs.com/guofx/p/11198292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!