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）｛｝ |
时间： 2024-10-12 00:02:54