bootstrap实现开关switch按钮

本文转载自查看原文 2021-01-06 15:07 439 springboot学习/ Vue学习

一、效果图

二、代码实现

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 bootstrap-table中使用bootstrap-switch开关按钮 CSS/HTML实现Switch开关按钮 layui switch开关按钮 Android 自定义实现switch开关按钮 Android 自定义实现switch开关按钮 Bootstrap 开关（switch）使用整理纯css实现 switch开关 elementui switch 开关，点击确认按钮后在进行开关状态开关按钮（ToggleButton）与开关（Switch）的功能与用法 Duilib 实现开关按钮