bootstrap實現開關switch按鈕
阿新 • • 發佈：2021-02-11
技術標籤：jquerycssbootstrapmatlabgui
一、效果圖
二、程式碼實現
<!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>