Bootstrap 开关(switch)控件
http://www.bootcss.com/p/bootstrap-switch/
https://github.com/Bttstrp/bootstrap-switch
$(function(){ $("#mySwitch").bootstrapSwitch({ state:true, size:'large', onColor:'success', offColor:'danger', onText:'开', offText:'关', onSwitchChange:function(event, state){ if(state==true){ var id = $(this).attr("id"); console.log(id); console.log("true"); }else{ console.log("false"); } } }); });
Name | Attribute | Type | Description | Values | Default |
state | checked | Boolean | The checkbox state | true, false | true |
size | data-size | String | The checkbox size | null, 'mini', 'small', 'normal', 'large' | null |
animate | data-animate | Boolean | Animate the switch | true, false | true |
disabled | disabled | Boolean | Disable state | true, false | false |
readonly | readonly | Boolean | Readonly state | true, false | false |
indeterminate | data-indeterminate | Boolean | Indeterminate state | true, false | false |
inverse | data-inverse | Boolean | Inverse switch direction | true, false | false |
radioAllOff | data-radio-all-off | Boolean | Allow this radio button to be unchecked by the user | true, false | false |
onColor | data-on-color | String | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'primary' |
offColor | data-off-color | String | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'default' |
onText | data-on-text | String | Text of the left side of the switch | String | 'ON' |
offText | data-off-text | String | Text of the right side of the switch | String | 'OFF' |
labelText | data-label-text | String | Text of the center handle of the switch | String | ' ' |
handleWidth | data-handle-width | String | Number | Width of the left and right sides in pixels | 'auto' or Number | 'auto' |
labelWidth | data-label-width | String | Number | Width of the center handle in pixels | 'auto' or Number | 'auto' |
baseClass | data-base-class | String | Global class prefix | String | 'bootstrap-switch' |
wrapperClass | data-wrapper-class | String | Array | Container element class(es) | String | Array | 'wrapper' |
onInit | Function | Callback function to execute on initialization | Function |
|
|
onSwitchChange | Function | Callback function to execute on switch state change. If false is returned, the status will be reverted, otherwise nothing changes | Function |
|
相关推荐
这是一个针对Bootstrap实现的开关(switch)控件。能够支持尺寸、颜色等属性的自定义。功能强大
网上的bootstrap-switch使用不便,因此整理了我在项目上所使用的开关控件,结合bootstrap框架使用
主要为大家分享了Bootstrap开关(switch)控件学习笔记,介绍了Bootstrap开关(switch)控件的功能、使用说明,感兴趣的小伙伴们可以参考一下
bootstrap-switch开关控件,里面包含了bootstrap-switch的css和bootstrap-switch.js两个主要的文件,使用时只需要引入这两个文件,然后初始化$('[name="status"]').bootstrapSwitch({ size:"mini", onSwitchChange:...
插件描述:Bootstrap 开关(switch)控件.
Bootstrap Switch将复选框和单选按钮变成切换开关
│ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库(H-ui定制) │ font-awesome 字体库文件 │ icheck 单选框、复选框控件 │ laypage laypage 翻页插件 │ layer layer弹出层插件 │ laytpl...
│ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库(H-ui定制) │ font-awesome 字体库文件 │ icheck 单选框、复选框控件 │ laypage laypage 翻页插件 │ layer layer弹出层...
该项目包含一个演示源代码,演示了如何为应用程序构建自定义切换开关组件,该组件可替代复选框之类的控件。 为了完全理解演示代码,需要具有使用React框架的工作经验。 您可以查看以了解有关React的更多信息。 这...