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 實現開關按鈕