Showing
1 changed file
with
59 additions
and
28 deletions
@@ -10,14 +10,16 @@ var $ = require('yoho-jquery'), | @@ -10,14 +10,16 @@ var $ = require('yoho-jquery'), | ||
10 | 10 | ||
11 | var $filter; | 11 | var $filter; |
12 | 12 | ||
13 | -var fCbFn, hCbFn; // 筛选和关闭的回调 | 13 | +var fCbFn, hCbFn; //筛选和关闭的回调 |
14 | 14 | ||
15 | -// 隐藏筛选界面 | 15 | +var missStatus; //是否忽略选中状态 |
16 | + | ||
17 | +//隐藏筛选界面 | ||
16 | function hideFilter() { | 18 | function hideFilter() { |
17 | $filter.addClass('hide'); | 19 | $filter.addClass('hide'); |
18 | } | 20 | } |
19 | 21 | ||
20 | -// 显示筛选界面 | 22 | +//显示筛选界面 |
21 | function showFilter() { | 23 | function showFilter() { |
22 | $filter.removeClass('hide'); | 24 | $filter.removeClass('hide'); |
23 | } | 25 | } |
@@ -27,8 +29,12 @@ function highlightMainItem() { | @@ -27,8 +29,12 @@ function highlightMainItem() { | ||
27 | var $mainItem = $('.filter-body .classify'); | 29 | var $mainItem = $('.filter-body .classify'); |
28 | 30 | ||
29 | $mainItem.on('touchstart', '.shower', function() { | 31 | $mainItem.on('touchstart', '.shower', function() { |
32 | + var bpIdData = $(this).attr('data-bp-id') || ''; | ||
33 | + | ||
30 | $mainItem.removeClass('highlight'); | 34 | $mainItem.removeClass('highlight'); |
31 | $(this).addClass('highlight'); | 35 | $(this).addClass('highlight'); |
36 | + | ||
37 | + $(document).trigger('shouldSendBpData', [bpIdData]); | ||
32 | }).on('touchend touchcancel', '.shower', function() { | 38 | }).on('touchend touchcancel', '.shower', function() { |
33 | $(this).removeClass('highlight'); | 39 | $(this).removeClass('highlight'); |
34 | }); | 40 | }); |
@@ -46,7 +52,7 @@ function highlightSubItem() { | @@ -46,7 +52,7 @@ function highlightSubItem() { | ||
46 | }); | 52 | }); |
47 | } | 53 | } |
48 | 54 | ||
49 | -// 主筛选项Tap事件句柄 | 55 | +//主筛选项Tap事件句柄 |
50 | function classifyTapEvt($this) { | 56 | function classifyTapEvt($this) { |
51 | if ($this.hasClass('active')) { | 57 | if ($this.hasClass('active')) { |
52 | return; | 58 | return; |
@@ -55,9 +61,10 @@ function classifyTapEvt($this) { | @@ -55,9 +61,10 @@ function classifyTapEvt($this) { | ||
55 | $this.siblings('.active').removeClass('active'); | 61 | $this.siblings('.active').removeClass('active'); |
56 | 62 | ||
57 | $this.addClass('active'); | 63 | $this.addClass('active'); |
64 | + | ||
58 | } | 65 | } |
59 | 66 | ||
60 | -// 子筛选项选中处理 | 67 | +//子筛选项选中处理 |
61 | function setSubClassify($this) { | 68 | function setSubClassify($this) { |
62 | var $sub = $this.closest('.sub-classify'); | 69 | var $sub = $this.closest('.sub-classify'); |
63 | 70 | ||
@@ -77,8 +84,8 @@ function setSubClassify($this) { | @@ -77,8 +84,8 @@ function setSubClassify($this) { | ||
77 | shower = $.trim($shower.html()); | 84 | shower = $.trim($shower.html()); |
78 | 85 | ||
79 | $shower.html( | 86 | $shower.html( |
80 | - shower.substring(0, shower.indexOf('</span>') + 7) + // 拆分出shower的title | ||
81 | - html.substring(0, html.indexOf('<i')) // 拆分选中筛选值 | 87 | + shower.substring(0, shower.indexOf('</span>') + 7) + //拆分出shower的title |
88 | + html.substring(0, html.indexOf('<i')) //拆分选中筛选值 | ||
82 | ); | 89 | ); |
83 | 90 | ||
84 | if ($this.index() === 0) { | 91 | if ($this.index() === 0) { |
@@ -90,7 +97,7 @@ function setSubClassify($this) { | @@ -90,7 +97,7 @@ function setSubClassify($this) { | ||
90 | return $sub; | 97 | return $sub; |
91 | } | 98 | } |
92 | 99 | ||
93 | -// 子筛选项Tap句柄 | 100 | +//子筛选项Tap句柄 |
94 | function subClassifyTapEvt($this) { | 101 | function subClassifyTapEvt($this) { |
95 | var id = $this.data('id'); | 102 | var id = $this.data('id'); |
96 | 103 | ||
@@ -105,52 +112,41 @@ function subClassifyTapEvt($this) { | @@ -105,52 +112,41 @@ function subClassifyTapEvt($this) { | ||
105 | }); | 112 | }); |
106 | } | 113 | } |
107 | 114 | ||
108 | - if (hCbFn) { | ||
109 | - hCbFn(); | ||
110 | - } | ||
111 | - | ||
112 | hideFilter(); | 115 | hideFilter(); |
113 | } | 116 | } |
114 | 117 | ||
115 | -// 初始化筛选 | 118 | +//初始化筛选 |
116 | function initFilter(opt) { | 119 | function initFilter(opt) { |
117 | var filterHammer; | 120 | var filterHammer; |
118 | 121 | ||
119 | - // 注册回调 | 122 | + //注册回调 |
120 | fCbFn = opt.fCbFn; | 123 | fCbFn = opt.fCbFn; |
121 | hCbFn = opt.hCbFn; | 124 | hCbFn = opt.hCbFn; |
122 | 125 | ||
123 | - // 是否忽略选中状态 | ||
124 | - window.missStatus = opt.missStatus; | 126 | + missStatus = opt.missStatus; |
125 | 127 | ||
126 | highlightMainItem(); | 128 | highlightMainItem(); |
127 | highlightSubItem(); | 129 | highlightSubItem(); |
128 | 130 | ||
129 | $filter = $('.filter-mask'); | 131 | $filter = $('.filter-mask'); |
130 | 132 | ||
131 | - // 页面没有filter的时候什么都不做 | ||
132 | - if (!$filter[0]) { | ||
133 | - return; | ||
134 | - } | ||
135 | - | ||
136 | filterHammer = new Hammer($filter[0]); | 133 | filterHammer = new Hammer($filter[0]); |
137 | filterHammer.on('tap', function(e) { | 134 | filterHammer.on('tap', function(e) { |
138 | var $this = $(e.target), | 135 | var $this = $(e.target), |
139 | $cur; | 136 | $cur; |
140 | - | ||
141 | - e.preventDefault();// 防止透点 | 137 | + // e.preventDefault();//防止透点 |
142 | 138 | ||
143 | if ($this.closest('.filter-body').length > 0) { | 139 | if ($this.closest('.filter-body').length > 0) { |
144 | $cur = $this.closest('.sub-item'); | 140 | $cur = $this.closest('.sub-item'); |
145 | if ($cur.length > 0) { | 141 | if ($cur.length > 0) { |
146 | 142 | ||
147 | - // tap subclassify | 143 | + //tap subclassify |
148 | $cur = $this.closest('li'); | 144 | $cur = $this.closest('li'); |
149 | 145 | ||
150 | subClassifyTapEvt($cur); | 146 | subClassifyTapEvt($cur); |
151 | } else { | 147 | } else { |
152 | 148 | ||
153 | - // tap classify | 149 | + //tap classify |
154 | $cur = $this.closest('.classify-item'); | 150 | $cur = $this.closest('.classify-item'); |
155 | 151 | ||
156 | e.srcEvent.stopPropagation(); | 152 | e.srcEvent.stopPropagation(); |
@@ -165,21 +161,56 @@ function initFilter(opt) { | @@ -165,21 +161,56 @@ function initFilter(opt) { | ||
165 | } | 161 | } |
166 | } | 162 | } |
167 | }); | 163 | }); |
164 | + if(opt.isScroll){ | ||
165 | + $("ul.sub-classify").each(function(){ | ||
166 | + | ||
167 | + $(this).wrap("<div class='sub-classify-farther' data-type='" + $(this).data("type") + "'></div>"); | ||
168 | + // $(this).removeClass("sub-classify"); | ||
169 | + | ||
170 | + var lastY=0,y=0; | ||
171 | + var $slider=$(this); | ||
172 | + | ||
173 | + $slider.on('touchstart', function(e) { | ||
174 | + lastY = e.originalEvent.touches[0].pageY; | ||
175 | + }); | ||
176 | + $slider.on('touchmove', function(e) { | ||
177 | + var curY = e.originalEvent.touches[0].pageY; | ||
178 | + var deltaY = curY - lastY; | ||
179 | + var height = $(this)[0].scrollHeight; | ||
180 | + var limit = height - $(this).parent().height(); | ||
181 | + y = y + deltaY; | ||
182 | + if (y < limit * -1) | ||
183 | + y = limit * -1; | ||
184 | + if (y > 0) | ||
185 | + y = 0; | ||
186 | + var translate = 'translate3d(0,' + y + 'px,0)'; | ||
187 | + $(this).css({ | ||
188 | + '-moz-transform': translate, | ||
189 | + '-ms-transform': translate, | ||
190 | + 'transform': translate, | ||
191 | + '-webkit-transform': translate, | ||
192 | + }); | ||
193 | + lastY = curY; | ||
194 | + }); | ||
195 | + $slider.on('touchend', function(e) {}); | ||
196 | + }); | ||
197 | + } | ||
198 | + | ||
168 | 199 | ||
169 | } | 200 | } |
170 | 201 | ||
171 | -// 重置筛选面板 | 202 | +//重置筛选面板 |
172 | function resetFilter() { | 203 | function resetFilter() { |
173 | if (typeof $filter === 'undefined') { | 204 | if (typeof $filter === 'undefined') { |
174 | return; | 205 | return; |
175 | } | 206 | } |
176 | 207 | ||
177 | - // 重置子筛选项 | 208 | + //重置子筛选项 |
178 | $('.sub-classify').each(function() { | 209 | $('.sub-classify').each(function() { |
179 | setSubClassify($(this).children(':first-child')); | 210 | setSubClassify($(this).children(':first-child')); |
180 | }); | 211 | }); |
181 | 212 | ||
182 | - // 重置主筛选项 | 213 | + //重置主筛选项 |
183 | classifyTapEvt($('.classify > :first-child')); | 214 | classifyTapEvt($('.classify > :first-child')); |
184 | } | 215 | } |
185 | 216 |
-
Please register or login to post a comment