Bootstarp-switch(動畫開關插件)
阿新 • • 發佈：2017-07-18
bootstrap pan 模態 cnblogs inpu 簡單 動畫效果 html屬性 asc
bootstarp-switch（動畫開關插件）
廢話不多說簡單，方便還是挺不錯的，代碼如下：
1.引入必要 css/js 文件
1 <!--引入 bootstrap 樣式--> 2 <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /> 3 <!--引入 bootstrap-switch 插件樣式--> 4 <link href="static/bootstrap-3.3.7-dist/switch/bootstrap-switch.min.css"rel="stylesheet" /> 5 <script src="static/js/jquery.min.js"></script> 6 <!--引入 bootstrap 腳本--> 7 <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 8 <!--引入 bootstrap-switch 插件腳本--> 9 <script src="static/bootstrap-3.3.7-dist/switch/bootstrap-switch.min.js"></script>
2.html代碼
1 <body> 2 <form id="form1" runat="server"> 3 <div class="container"> 4 <input name="status" type="checkbox" data-size="small" /> 5 </div> 6 </form> 7 </body>
3.js實現開關控件的初始化
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 $(‘[name="status"]‘).bootstrapSwitch({ 4 onText: "ON", 5 offText: "OFF", 6 onColor: "success", 7 offColor: "info", 8 size: "small", 9 onSwitchChange: function (event, state) { 10 if (state == true) { 11 //成功 12 } else { 13 //失敗 14 } 15 } 16 }) 17 }); 18 </script>
4.效果圖
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）｛｝ |
Bootstarp-switch(動畫開關插件)