switcher.js 2.67 KB
/**
 * Switch组件
 * 使用:
 * 1. 单个 为input[type=checkbox]添加'switch'类 $(selector).switcher()
 * 2. 两个切换 为checkbox的共有父元素添加'multi-switch'类 $(selector).switcher()
 */
define('switcher', ['components/common', 'jquery'], function(common) {
    var template = '<label for="{{id}}"><i class="iconfont"></i></label>';
    var doms = ["input[type=checkbox]", ".switch-inner"],
        selectedSelector = "switch-selected";
    var defaultSettings = {
        onClick: function () { }
    };

    var Switch = function(ele) {
        var $ele = $(ele),
            id = ele.id, label;

        if($ele.hasClass('switch-round')) return; //防止重复调用

        if(!id) {
            id = 'switcher' + Switch.index++;
            $ele.attr("id", id);
        }

        label = common.tempEngine(template, {id: id});
        $ele.addClass("switch-round");
        $(label).insertAfter($ele);
    };
    Switch.index = 0;
    
    var MultiSwitch = function(ele,settings) {
        var $ele = $(ele);

        settings = $.extend({}, defaultSettings, settings);

        $ele.find(doms[0]).each(function() {
            var $parent = $(this).parent();
            $parent.addClass("switch-inner")
                .toggleClass(selectedSelector, $(this).prop("checked"));
            $parent[0]._onclick = settings.onClick;
        });
    }

    $("body").on("click.switch", ".switch + label", function() {
        var $switch = $(this).siblings(".switch");

        $switch.attr("checked", !$switch.attr("checked"))
            .prop("checked", !$switch.attr("checked"));
    }).on("click.multiSwitch", ".multi-switch .switch-inner", function() {
        var switchInner = $(this);
        
        if(switchInner.hasClass(selectedSelector)){
        	return;
        }
        
        switchInner.find(doms[0])
            .one("click.stop", function(e) {
                e.stopPropagation();
            }).trigger('click');
        switchInner.addClass(selectedSelector)
            .siblings(doms[1]).removeClass(selectedSelector)
            .find(doms[0]).prop("checked", false);
        switchInner[0]._onclick();
    });

    $.fn.switcher = function(settings) {
        var $el = $(this);

        if($el.hasClass('switch')) {
            return new Switch(this);
        }
        
        $el.find('.switch').each(function() {
            new Switch(this);
        });

        $el.find(".multi-switch").each(function() {
            new MultiSwitch(this,settings);
        });

        return $el;
    };

    $.fn.switched = function () {
        var $el = $(this);

        setTimeout(function() {
            $el.trigger("click.multiSwitch");    
        }, 50);
        
    }
});