bootstrap-switch

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

首先需要引入bootstrap的css和js文件，再引入bootstrap-switch.css和bootstrap-switch.js文件

下载地址：http://www.bootcss.com/p/bootstrap-switch/

html代码：

通过js实现开关的初始化：

$('[name="switch"]').bootstrapSwitch({
onText:"启动",
offText:"停止",
onColor:"success",
offColor:"info",
size:"small",
onSwitchChange:function(event,state){
if(state==true){
$(this).val("1");
}else{
$(this).val("2");
}
}
})

覆盖全局属性：

$.fn.bootstrapSwitch.defaults.size = 'large';
$.fn.bootstrapSwitch.defaults.onColor = 'success';

bootstrap-switch若想根据动态数据控制switch的状态，使用$(this).bootstrapSwitch('state',!state,true);

贴代码

$(element[0]).children().bootstrapSwitch().on('switchChange.bootstrapSwitch',function(target,state){
$(this).bootstrapSwitch('state',!state,true);//阻止switch状态变化 //......此处省略动态获取数据的代码 //如果TRUE则状态改变，否则状态不变
if（...){
$this.bootstrapSwitch('toggleState',true);
}
}）

bootstrap-switch的属性：

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）｛｝