Bootstrap Switch（开关控件）简易使用

Bootstrap Switch ：通过复选框美化实现的一款开关控件

官方网站 http://www.bootcss.com/p/bootstrap-switch/ 

项目当中美化按钮，本来想使用honeySwith的，但是它的class跟项目class冲突，所以选择Bootstrap Switch ；

先是导入文件，js,css不用下载

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>

jsp:

<input type="checkbox" checked class="checkbox" value="${chlProductList.id}"/>

<script type="text/javascript">

/* bootstrap开关控件，初始化 */
$(function(){  
        /* 初始化控件 */  
        $(".checkbox").bootstrapSwitch({  
            onText : "上线",      // 设置ON文本  
            offText : "下线",    // 设置OFF文本  
            onColor : "success",// 设置ON文本颜色     (info/success/warning/danger/primary)  
            offColor : "danger",  // 设置OFF文本颜色        (info/success/warning/danger/primary)  
            size : "mini",    // 设置控件大小,从小到大  (mini/small/normal/large)  
            handleWidth:"35",//设置控件宽度
            // 当开关状态改变时触发  
            onSwitchChange : function(event, state) {  
            var ProductId = event.target.defaultValue;
                if (state == true) {
                //上线
                updateProductStatus(ProductId,'AOB');
                    /* alert("ON"); */
                } else {
                //下线
                updateProductStatus(ProductId,'AOC');
                    /* alert("OFF"); */
                }  
            }  
        });  
    });

<script/>

项目实际应用中，开关控件样式改变必然会操作数据库，来更新数据状态，所以为了拿到数据的id,我在属性上面加上了value，来拿到要改数据的id值，而这个值，我在debugger中，看到值在target中的defaultValue；所以上面我有了var ProductId = event.target.defaultValue;

要改控件属性也可以直接将属性写在html中，下面罗列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）｛｝

覆盖全局默认值：

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

示例图：