首页 > 代码库 > Bootstarp-switch(动画开关插件)
Bootstarp-switch(动画开关插件)
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(动画开关插件)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。