booStrap框架——switch

这个按钮说实话有点难受，我总是分不清是开着还是关着

1.文件2.

<link rel="stylesheet" type="text/css" href="assets/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/bootstrap-switch/bootstrap-switch.css">

<script type="text/javascript" src="assets/jquery.min.js"></script>
<script type="text/javascript" src="assets/bootstrap-switch/bootstrap-switch.js"></script>

2.html 

样式：

 checked就是开着

<div id="sw-content">
    <input type="checkbox" class="make-switch" checked data-on-color="default" data-off-color="primary">
</div>

属性

除了默认的样式，还可以通过给input框设置属性的方式给它自定义一些样式

按钮大小

data-size="..."

1. Mini  迷你

2. Small 小号

3. Normal 正常

4. Large 大号

按钮颜色

data-on-color="..."

data-off-color="..."

1. primary 深蓝
2. info　　 浅蓝
3. success 绿色
4. warning 黄色
5. danger 红色

按钮文字

data-on-text="..."(str类型)

data-off-text="..."

按钮宽度

data-handle-width=".."(int类型)

label宽度

data-label-width="..."(int类型)

只可读

readonly=""

禁用

disabled=""

3.事件

<script type="text/javascript">
        $(document).ready(function(){
            //基本初始化
            $('#sw-content input').bootstrapSwitch();

            //手动设置按钮状态
            $('#sw-content input').bootstrapSwitch('state',false);

            //点击按钮切换 switch
            $('#oper-btn-sw').click(function(){
                $('#sw-content input').bootstrapSwitch('toggleState');
            });

            //点击触发事件，监听按钮状态
            $('#sw-content input').on('switchChange.bootstrapSwitch',function(event,state){

            //内置对象、内置属性
            console.log(event); 

            //获取状态
            console.log(state); 
        });  
        })

</script>

 ok，结束