bootstrap-switch(開關外掛)
阿新 • • 發佈：2019-01-24
最近在專案開發上遇到一個需要開關的地方，後來找了下angular-switch.js發覺樣例太少，而且還需要翻牆去找，對於我這種英文菜鳥來說太麻煩了，所以選了個bootstrap-switch.js外掛，發覺效果還可以。下面簡單介紹下bootstrap-switch的使用。
需匯入的檔案
bootstrap檔案可以到這裡去下載：http://www.bootstrap-switch.org/<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-switch-master/dist/js/bootstrap-switch.min.js"></script> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.min.css" /> <pre name="code" class="html"><link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/bootstrap-switch-master/docs/js/jquery.min.js" />
html：
<input name="status" type="checkbox" data-size="small">通過js來實現開關的初始化
$('[name="status"]').bootstrapSwitch({ onText:"啟動", offText:"停止", onColor:"success", offColor:"info", size:"small", onSwitchChange:function(event,state){ if(state==true){ $(this).val("1"); }else{ $(this).val("2"); } } })
當然也可以直接將屬性寫在html中，下面羅列bootstrap-switch的屬性及應用
| js屬性名 | html屬性名 | 型別 | 描述 | 取值範圍 | 預設值 |
| state | checked | Boolean | 選中狀態 | true、false | true |
| size | data-size | String | 開關大小 | null、mini、small、normal、large | null |
| animate | data-animate | Boolean | 動畫效果 | true、false | true |
| disabled | disabled | Boolean | 禁用開關 | ture、false | false |
| readonly | readonly | Boolean | 開關狀態只讀，不能修改 | true、false | false |
| indeterminate | data-indeterminate | Boolean | 模態 | true、false | false |
| inverse | data-inverse | Boolean | 顛倒開關順序 | true、false | false |
| radioAllOff | data-radio-all-off | Boolean | 允許單選按鈕被使用者取消選中 | true、false | false |
| onColor | data-on-color | String | 左側開關顏色 | primary、info、success、warning、danger、default | primary |
| offColor | data-off-color | String | 右側開關顏色 | primary、info、success、warning、danger、default | default |
| onText | data-on-text | String | 左側開關顯示文字 | String | ON |
| offText | data-off-text | String | 右側開關顯示文字 | String | OFF |
| labelText | data-label-text | String | 開關中間顯示文字 | String | |
| handleWidth | data-handle-width | String|Number | 開關左右2側的寬度 | String|Number | auto |
| labelWidth | data-label-width | String|Number | 開關中間的寬度 | String|Number | auto |
| baseClass | data-base-class | String | 開關基礎樣式 | String | bootstrap-switch |
| wrapperClass | data-wrapper-class | String | Array | 元素樣式容器 | String | Array | wrapper |
| onInit | function | 初始化開關 | Function | function（event，state）｛｝ | |
| onSwitchChange | function | 當開關狀態改變時觸發 | Function | function（event，state）｛｝ |
覆蓋全域性預設值：
$.fn.bootstrapSwitch.defaults.size = 'large';
$.fn.bootstrapSwitch.defaults.onColor = 'success';示例圖：
