Bootstrap 开关（switch）使用整理

1.在JS里根据指定的 1或者0 或者其它值让按钮变成 on 或者 off （通常需要根据数据库查询的结果初始化开关的状态）

（--开关插件包 bootstrap-switch.min.js）

<div class="make-switch" data-on-label="开" data-off-label="关" id="toggle-state-switch" data-on="success" data-off="warning">
    <input id ="toggle" type="checkbox"  checked="checked" class="toggle"  />
</div>

function changeState(stateValue){
        if(stateValue==1){
            $('#toggle-state-switch').bootstrapSwitch('setState', true);
        }else{
            $('#toggle-state-switch').bootstrapSwitch('setState', false);
        }
}
View Code

tip：

--文本设置

data-on-label="开" 

data-off-label="关"

--颜色设置（5种：info success warning danger primary）

 

data-on="success" data-off="warning"

2.改变开关状态，获取开关的值

$('#toggle-state-switch').on('switch-change', function (e, data) {
        var $el = $(data.el);
        var value = data.value;
    });
View Code

 

posted @ 2016-06-12 13:53  Aria_  阅读(15157)  评论(0)  编辑  收藏  举报
TOP