开关组件： bootstrap-switch 基础使用以及扩展

一、相关文档

官网以及演示地址：http://www.bootcss.com/p/bootstrap-switch/

二、引入文件

<link href="/css/plugins/bootstrap-switch/bootstrap-switch.min.css" rel="stylesheet"/>
<script src="/js/plugins/bootstrap-switch/bootstrap-switch.min.js"></script>

三、公用对象封装

1. 创建 my_switch 类

(function () {
     
    var my_switch = {
     
    };
 
}());

2. 为 my_switch 类定义基础属性

var gyl_switch = function (selector) {

    this.selector = selector;
    this.on_label = "是";
    this.off_label = "否";
    this.default_state = 0;
    this.on_state = 1;
    this.off_state = 0;
    this.on = 'primary';
    this.off= 'default';
    this.size='small';
};

3. 定义初始化方法 

gyl_switch.prototype = {
    init: function ()
    {
        var _this = this;
        $(this.selector).each(function (index) {
            _this.setData(this);
            $(this).bootstrapSwitch({
                onText: _this.on_label,
                offText: _this.off_label,
                state: _this.default_state,
                onColor:_this.on,
                offColor:_this.off,
                size:_this.size,
            });
            if (typeof ($(this).data("for-input")) !== "undefined")
            {
                var input = $(this).data("for-input");
                $(this).on('switchChange.bootstrapSwitch', function (event, state) {
                    _this.setData(this);
                    if (state == true) {
                        $('input[name=' + input + ']').val(_this.on_state);
                    } else {
                      $('input[name=' + input + ']').val(_this.off_state);
                    }
                });
            }
        });
    },
    setData: function (selector)
    {
            this.on_label = this.getData(selector,'on-label',this.on_label);
            this.off_label= this.getData(selector,'off-label',this.off_label);
            this.default_state = this.getData(selector,'default-state',this.default_state);
            this.on_state = this.getData(selector,'on-state',this.on_state);  
            this.off_state = this.getData(selector,'off-state',this.off_state);      
            this.on = this.getData(selector,'on-color',this.on);
            this.off= this.getData(selector,'off-color',this.off);
            this.size = this.getData(selector,'size',this.size);
    },
    getData: function (selector, name,value)
    {
        if (typeof ($(selector).data(name)) !== "undefined" && $(selector).data(name) !== '')
      {
         return $(selector).data(name);               
      }else{
         return value;               
      }
    }
}

4. 注册全局对象

window.my_switch = my_switch;

5. 初始化

<input type="checkbox" class="make-switch switch"  data-on_label="开" data-off_label="关" data-for_input="status" data-default_sate=1>
<input type="hidden" name="status">

var init_switch = new my_switch($(".switch"));
init_switch.init();