lineSelect.js
3.4 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/*
* Modify the default select show,
* and imitate the select action.
* Code in 2015/05/28
* By van
*/
define(function( require, exports, module ) {
var crossselect = function(target, options){
this.target = target;
this.opt = $.extend({
column: 3,
tpl: {
'body': '<div class="Jc_select"></div>',
'title': '<div class="Jc_showarea"><span class="Jc_words">{word}</span><em class="Jc_arrow"></em></div>',
'listlimit' : '<div class="Jc_list_limit"></div>',
'list': '<ul class="Jc_list clearfix"></ul>',
'cell': '<li data-name="{name}"><span class="bank-logo bank-action" id="{id}" data-name="{name}"></span></li>',
'more': '<div class="Jc_morelink">查看更多</div>'
}
}, options);
this.init();
};
crossselect.prototype = {
init: function(){
this.pkgHTML();
this.eventAction();
},
pkgHTML: function(){
var tpl = this.opt.tpl;
var cell = this.select(tpl.cell);
var limit = $(tpl.listlimit);
var more = $(tpl.more);
var l = $(tpl.list);
var b = $(tpl.body);
var t = $(tpl.title.replace('{word}', $(cell.shift()).attr('data-name')));
for(var i = 0, len = cell.length; i < len; i++){
l.append(cell[i]);
};
b.append(t).append(limit.append(l).append(more)).insertAfter($(this.target));
},
select: function(tplcell){
var op = $(this.target).find("option"),
arr = [];
for (var i = 0, l = op.length; i < l; i++){
arr.push(
tplcell.replace(/\{name\}/g, op.eq(i).html()).replace(/\{id\}/, op.eq(i).attr("data-id"))
)
};
return arr;
},
eventAction: function(){
var D = $(document), h,
op = $(this.target).find("option"),
showarea = $(".Jc_showarea"),
list = $(".Jc_list_limit"),
word = $(".Jc_words"),
link = $(".Jc_morelink"),
on = 'Jc_showon',
e = [
showarea[0],
list[0],
link[0],
$(".Jc_list")[0]
];
showarea.live({
click: function(event){
event.stopPropagation();
if ($(this).hasClass(on)){
$(this).removeClass(on);
list.hide();
}else {
$(this).addClass(on);
list.show();
}
h = $(".Jc_list").outerHeight();
}
});
$(".bank-action").live({
click: function(){
word.html( '<span class="bank-logo '+ $(this).attr('id') +'"></span>' );
showarea.removeClass(on);
list.hide();
op.removeAttr('selected');
op.eq($(this).parent().index() + 1).attr('selected', 'selected')
}
});
link.on({
click: function(){
if ($(this).hasClass('on')){
$(this).removeClass('on').html("查看更多");
$(this).parent().height(114);
}else {
$(this).addClass('on').html("收起更多");
$(this).parent().height(h+10);
}
}
})
D.on({
click: function(event){
if (!_in(event.target, e)){
list.hide();
showarea.removeClass(on);
}
}
});
function _in(tag, arr){
for (var i=0, l=arr.length; i < l; i++){
if (tag == arr[i]) return true;
}
return false;
};
}
};
return crossselect;
})