filter.js
2.08 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
/**
* 筛选JS
* 暴露三个接口:注册回调、显示filter、隐藏filter
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/19
*/
var $ = require('yoho.zepto');
var $filter = $('.filter-mask');
var $classify = $filter.find('.classify'),
$subClassify = $filter.find('.sub-classify');
var cbFn;
//隐藏筛选界面
function hideFilter() {
$filter.addClass('hide');
}
//显示筛选界面
function showFilter() {
$filter.removeClass('hide');
}
//注册sub-classify点击后的回调
function registerCbFn(cb) {
cbFn = cb;
}
//设置完高度后显示sub并设置选中
$classify.children(':first-child').addClass('active'); //T:不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁
//classify switch
$classify.delegate('.classify-item', 'tap', function(e) {
var $this = $(this);
e.stopPropagation();
if ($this.hasClass('active')) {
return;
}
$this.siblings('.active').removeClass('active');
$this.addClass('active');
});
//点击Mask隐藏筛选界面
$filter.tap(function() {
hideFilter();
});
$subClassify.delegate('li', 'tap', function(e) {
var $this = $(this),
id = $this.data('id');
var $sub = $this.closest('.sub-classify');
var $shower = $sub.siblings('.shower');
var html, shower;
e.stopPropagation();
if ($this.hasClass('chosed')) {
return;
}
$sub.children('.chosed').removeClass('chosed');
$this.addClass('chosed');
html = $.trim($this.html());
shower = $.trim($shower.html());
$shower.html(
shower.substring(0, shower.indexOf('</span>') + 7) + //拆分出shower的title
html.substring(0, html.indexOf('<i')) //拆分选中筛选值
);
if ($this.index() === 0) {
$shower.addClass('default');
} else {
$shower.removeClass('default');
}
if (cbFn) {
cbFn({
type: $sub.data('type'),
id: id
});
}
hideFilter();
});
exports.showFilter = showFilter;
exports.hideFilter = hideFilter;
exports.registerCbFn = registerCbFn;