您的位置：首页 > Web前端 > BootStrap

基于Bootstrap的switch button

2014-06-06 14:18 148 查看

背景

本来是很简单的问题，由于那堵无形的墙，使得一些资料难以获取，再加上百度搜出来的代码基本都不能运行，然后就有点棘手了。。。

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	function(event, state) {}
onSwitchChange		Function	Callback function to execute on switch state change	Function	function(event, state) {} [/code]

onText/offText可以不只是文字

$(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
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航