bootstrap switch開關(guān)組件使用方法詳解

發(fā)布時(shí)間：2020-10-05 20:33:22 來源：腳本之家閱讀：703 作者：javanbme 欄目：web開發(fā)

bootstrap中文網(wǎng)上有這么一個(gè)bootstrap-switch組件，很實(shí)用，看demo學(xué)習(xí)并記錄一下。

<!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="external nofollow" rel="stylesheet" /> 
    <link href="css/bootstrap-switch.min.css" rel="external nofollow" 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:"啟動(dòng)",  
      offText:"停止",  
      onColor:"success",  
      offColor:"info",  
      size:"small",  
    onSwitchChange:function(event,state){  
      if(state==true){  
        alert('已打開');  
      }else{  
        alert('已關(guān)閉');  
      }  
    }  
 
       })  
 
    </script> 
  </body> 
</html>

Bootstrap-Switch源碼地址：https://github.com/nostalgiaz/bootstrap-switch

Bootstrap-Switch文檔以及Demo：http://www.bootstrap-switch.org/examples.html

常用的屬性

size：開關(guān)大小。可選值有'mini', 'small', 'normal', 'large'
onColor：開關(guān)中開按鈕的顏色?？蛇x值有'primary', 'info', 'success', 'warning', 'danger', 'default'
offColor：開關(guān)中關(guān)按鈕的顏色?？蛇x值'primary', 'info', 'success', 'warning', 'danger', 'default'
onText：開關(guān)中開按鈕的文本，默認(rèn)是“ON”。
offText：開關(guān)中關(guān)按鈕的文本，默認(rèn)是“OFF”。
onInit：初始化組件的事件。
onSwitchChange：開關(guān)變化時(shí)的事件。

bootstrap switch開關(guān)組件使用方法詳解

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

bootstrap switch開關(guān)組件使用方法詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽