bootstrap-switch開關元件
阿新 • • 發佈：2019-02-10
bootstrap中文網上有這麼一個bootstrap-switch元件，很實用，看demo學習並記錄一下。
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=description content=""> <meta name=viewport content="width=device-width, initial-scale=1"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-switch.min.css" rel="stylesheet" /> <script src="js/jquery/jquery.1.11.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-switch.min.js"></script> </head> <body> <input name="status" type="checkbox" data-size="small"> <script type="text/javascript"> $('[name="status"]').bootstrapSwitch({ onText:"啟動", offText:"停止", onColor:"success", offColor:"info", size:"small", onSwitchChange:function(event,state){ if(state==true){ alert('已開啟'); }else{ alert('已關閉'); } } }) </script> </body> </html>
常用的屬性
- size：開關大小。可選值有'mini', 'small', 'normal', 'large'
- onColor：開關中開按鈕的顏色。可選值有'primary', 'info', 'success', 'warning', 'danger', 'default'
- offColor：開關中關按鈕的顏色。可選值'primary', 'info', 'success', 'warning', 'danger', 'default'
- onText：開關中開按鈕的文字，預設是“ON”。
- offText：開關中關按鈕的文字，預設是“OFF”。
- onInit：初始化元件的事件。
- onSwitchChange：開關變化時的事件。
