switcher.js
2.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/**
* 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);
}
});