背景
本来是很简单的问题,由于那堵无形的墙,使得一些资料难以获取,再加上百度搜出来的代码基本都不能运行,然后就有点棘手了。。。
Switch Button
官网:http://www.bootstrap-switch.org/
快速上手
Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
[...]
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>
[...]
Add your checkbox.
<input type="checkbox" name="my-checkbox" checked>
Initialize Bootstrap Switch.
$("[name='my-checkbox']").bootstrapSwitch();
Enjoy.
相关设置
如无意外的话这个按钮是可以滑动了。下面是一些参数、回调函数以及响应事件。
Name | Attribute | Type | Description | Values | Default |
---|---|---|---|---|---|
state | checked | Boolean | The checkbox state | true, false | true |
size | data-size | String | The checkbox state | 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 | Boolean | indeterminate state | 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 | ' ' |
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 | Function | |
$(function () {
$("[name='my-checkbox']").bootstrapSwitch({
onText:'<span class="glyphicon glyphicon-ok"></span>',
offText:'<span class="glyphicon glyphicon-remove"></span>'
});
})
这样的话,样式就是下面这样的了
状态事件监听:
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
});