Bootstrap Switch（开关控件）

最新推荐文章于 2024-03-13 23:59:18 发布

一点多

最新推荐文章于 2024-03-13 23:59:18 发布

阅读量8.7k

点赞数

分类专栏： Web插件文章标签： Bootstrap Switch 开关控件

本文链接：https://blog.csdn.net/gah7788/article/details/55518536

版权

Web插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Bootstrap Switch ：通过复选框美化实现的一款开关控件

官方网站 http://www.bootcss.com/p/bootstrap-switch/

示例：(复制即用)，更多样式，可打开官方地址进行查看。

上一张效果图：

<!DOCTYPE html>  
<html>  
<head>  
<!-- 所需js/css文件 -->  
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">  
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>  
</head>  
<body>  
    <!-- HTML -->  
    <input type="checkbox" checked id="checkbox"/>  
    <!-- JS -->  
    <script type="text/javascript">  
        $(function(){  
            /* 初始化控件 */  
            $("#checkbox").bootstrapSwitch({  
                onText : "ON",      // 设置ON文本  
                offText : "OFF",    // 设置OFF文本  
                onColor : "success",// 设置ON文本颜色     (info/success/warning/danger/primary)  
                offColor : "info",  // 设置OFF文本颜色        (info/success/warning/danger/primary)  
                size : "normal",    // 设置控件大小,从小到大  (mini/small/normal/large)  
                // 当开关状态改变时触发  
                onSwitchChange : function(event, state) {  
                    if (state == true) {  
                        alert("ON");  
                    } else {  
                        alert("OFF");  
                    }  
                }  
            });  
        });  
    </script>  
</body>  
</html>