fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 34c7779954846ed001e16bce42bb8c6660753720 1 parent c7fbfba8

product filter

Inline Side-by-side
Showing 9 changed files with 267 additions and 49 deletions
@@ -73,8 +73,8 @@ @@ -73,8 +73,8 @@
73 {{/each}} 73 {{/each}}
74 </p> 74 </p>
75 75
76 - <div id="brand-search" class="brand-search">  
77 - <input type="text"> 76 + <div class="brand-search">
  77 + <input id="brand-search-input" type="text">
78 <span class="btn"> 78 <span class="btn">
79 <i class="iconfont">&#xe611;</i> 79 <i class="iconfont">&#xe611;</i>
80 </span> 80 </span>
@@ -83,15 +83,17 @@ @@ -83,15 +83,17 @@
83 83
84 <ul class="panel-body check-container clearfix"> 84 <ul class="panel-body check-container clearfix">
85 {{# brandsShow}} 85 {{# brandsShow}}
86 - <li class="attr" data-href="{{href}}" data-id="{{id}}" data-index="{{index}}">  
87 - <span class="iconfont checkbox">&#xe613;</span>  
88 - <span title="{{name}}">{{name}}</span> 86 + <li class="attr" data-index="{{index}}" data-key="{{key}}">
  87 + <a href="{{href}}">
  88 + <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
  89 + <span title="{{name}}">{{name}}</span>
  90 + </a>
89 </li> 91 </li>
90 {{/ brandsShow}} 92 {{/ brandsShow}}
91 </ul> 93 </ul>
92 94
93 <div class="btns"> 95 <div class="btns">
94 - <button class="multi-select-ok dis">确定</button> 96 + <button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
95 <button class="multi-select-cancel">取消</button> 97 <button class="multi-select-cancel">取消</button>
96 </div> 98 </div>
97 </div> 99 </div>
@@ -152,34 +154,34 @@ @@ -152,34 +154,34 @@
152 <span class="title">高级选项：</span> 154 <span class="title">高级选项：</span>
153 155
154 <div class="attr-content"> 156 <div class="attr-content">
155 - <ul class="clearfix"> 157 + <ul class="clearfix senior-attr-wrap">
156 {{#each seniorChose}} 158 {{#each seniorChose}}
157 <li class="attr"> 159 <li class="attr">
158 {{name}} 160 {{name}}
159 <span class="iconfont"></span> 161 <span class="iconfont"></span>
160 - </li>  
161 - {{/each}}  
162 - </ul>  
163 162
164 - <div class="sub-senior-wrap hide">  
165 - {{#each seniorChose}}  
166 - <div class="sub check-container" data-attr="{{attr}}">  
167 - <span class="multi-select">多选 +</span>  
168 - <ul class="clearfix">  
169 - {{#each sub}}  
170 - <li class="attr">  
171 - <span class="iconfont checkbox">&#xe613;</span>  
172 - <span data-id="{{id}}" data-href="{{href}}">{{name}}</span>  
173 - </li>  
174 - {{/each}}  
175 - </ul>  
176 - <div class="btns">  
177 - <button class="multi-select-ok dis">确定</button>  
178 - <button class="multi-select-cancel">取消</button> 163 + <div class="sub hide" data-attr="{{attr}}">
  164 + {{#if showMulti}}
  165 + <span class="multi-select">多选 +</span>
  166 + {{/if}}
  167 + <ul class="clearfix check-container">
  168 + {{#each sub}}
  169 + <li class="attr">
  170 + <a href="{{href}}">
  171 + <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
  172 + <span>{{name}}</span>
  173 + </a>
  174 + </li>
  175 + {{/each}}
  176 + </ul>
  177 + <div class="btns">
  178 + <button class="multi-select-ok dis">确定</button>
  179 + <button class="multi-select-cancel">取消</button>
  180 + </div>
179 </div> 181 </div>
180 - </div> 182 + </li>
181 {{/each}} 183 {{/each}}
182 - </div> 184 + </ul>
183 </div> 185 </div>
184 </div> 186 </div>
185 {{/if}} 187 {{/if}}
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Wed Nov 25 18:16:02 2015 5 +Created by FontForge 20120731 at Thu Nov 26 10:18:10 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -69,6 +69,9 @@ d="M710 300l-473 474l38 38l512 -512l-512 -512l-38 38z" /> @@ -69,6 +69,9 @@ d="M710 300l-473 474l38 38l512 -512l-512 -512l-38 38z" />
69 d="M314 300l473 -474l-38 -38l-512 512l512 512l38 -38z" /> 69 d="M314 300l473 -474l-38 -38l-512 512l512 512l38 -38z" />
70 <glyph glyph-name="uniE610" unicode="&#xe610;" 70 <glyph glyph-name="uniE610" unicode="&#xe610;"
71 d="M797 135q0 -7 -5 -13l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -14z" /> 71 d="M797 135q0 -7 -5 -13l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -14z" />
  72 + <glyph glyph-name="uniE611" unicode="&#xe611;"
  73 +d="M892 41l-236 236q54 77 54 172q0 81 -39.5 150t-108.5 108.5t-150 39.5q-123 0 -210.5 -87t-87.5 -211t87.5 -211t210.5 -87q95 0 173 55l236 -236q16 -17 38 -18t37 14q10 10 12.5 23.5t-1.5 27t-15 24.5zM213 449q0 82 58.5 140.5t140.5 58.5t140.5 -58.5t58.5 -140.5
  74 +t-58.5 -140.5t-140.5 -58.5t-140.5 58.5t-58.5 140.5z" />
72 <glyph glyph-name="uniE612" unicode="&#xe612;" 75 <glyph glyph-name="uniE612" unicode="&#xe612;"
73 d="M939 -212h-854q-23 0 -42.5 11.5t-31 31t-11.5 42.5v854q0 35 25 60t60 25h854q23 0 42.5 -11.5t31 -31t11.5 -42.5v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -7 3 -11.5t7.5 -7.5t11.5 -3h810q10 0 16 6t6 16v810z 76 d="M939 -212h-854q-23 0 -42.5 11.5t-31 31t-11.5 42.5v854q0 35 25 60t60 25h854q23 0 42.5 -11.5t31 -31t11.5 -42.5v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -7 3 -11.5t7.5 -7.5t11.5 -3h810q10 0 16 6t6 16v810z
74 M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q10 0 17.5 -3.5t12.5 -9.5l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" /> 77 M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q10 0 17.5 -3.5t12.5 -9.5l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" />
@@ -17,10 +17,19 @@ moreUnicode = { @@ -17,10 +17,19 @@ moreUnicode = {
17 17
18 var $brandDefault = $('.brand .default'), 18 var $brandDefault = $('.brand .default'),
19 $brandPanel = $('.brand .brand-panel'), 19 $brandPanel = $('.brand .brand-panel'),
20 - $brandMore = $('#brand-more'); 20 + $brandAttrs = $('.brand .attr'),
  21 + $brandMore = $('#brand-more'),
  22 + $brandMulti = $('#brand-multi');
21 23
22 var $brandMoreTxt, $brandMoreIcon; 24 var $brandMoreTxt, $brandMoreIcon;
23 25
  26 +// var uriLoc = require('./uri');
  27 +
  28 +//清除checkbox选中状态
  29 +function clearChecked($checkbox) {
  30 + $checkbox.removeClass('checked').html(checkUnicode.unchecked);
  31 +}
  32 +
24 //显示更多品牌面板 33 //显示更多品牌面板
25 function brandShowMore() { 34 function brandShowMore() {
26 $brandDefault.addClass('hide'); 35 $brandDefault.addClass('hide');
@@ -33,19 +42,36 @@ function brandHideMore() { @@ -33,19 +42,36 @@ function brandHideMore() {
33 $brandDefault.removeClass('hide'); 42 $brandDefault.removeClass('hide');
34 } 43 }
35 44
  45 +//url构造&跳转
  46 +function uriLoc(attr, val) {
  47 + var href = decodeURIComponent(window.location.search),
  48 + query = attr + '=' + val,
  49 + newHref;
  50 +
  51 + if (href === '') {
  52 + newHref = '?' + query;
  53 + } else {
  54 + newHref = href + '&' + query;
  55 + }
  56 +
  57 + window.location.href = newHref;
  58 +}
  59 +
36 if ($brandMore.length > 0) { 60 if ($brandMore.length > 0) {
37 $brandMoreTxt = $brandMore.children('em'); 61 $brandMoreTxt = $brandMore.children('em');
38 $brandMoreIcon = $brandMore.children('.iconfont'); 62 $brandMoreIcon = $brandMore.children('.iconfont');
39 } 63 }
40 64
41 //屏蔽筛选项双击文字选中 65 //屏蔽筛选项双击文字选中
42 -$('.filter-box').on('selectstart', '.attr', function() { 66 +$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
43 return false; 67 return false;
44 }); 68 });
45 69
46 //checkbox 70 //checkbox
47 $('.check-container').on('click', '.attr', function() { 71 $('.check-container').on('click', '.attr', function() {
48 - var $check = $(this).find('.checkbox'); 72 + var $this = $(this),
  73 + $check = $this.find('.checkbox'),
  74 + $btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
49 75
50 $check.toggleClass('checked'); 76 $check.toggleClass('checked');
51 77
@@ -54,10 +80,18 @@ $('.check-container').on('click', '.attr', function() { @@ -54,10 +80,18 @@ $('.check-container').on('click', '.attr', function() {
54 } else { 80 } else {
55 $check.html(checkUnicode.unchecked); 81 $check.html(checkUnicode.unchecked);
56 } 82 }
  83 +
  84 + //更新按钮状态
  85 + if ($check.hasClass('checked') ||
  86 + $this.siblings('.attr').find('.checked').length > 0) {
  87 + $btnOk.removeClass('dis');
  88 + } else {
  89 + $btnOk.addClass('dis');
  90 + }
57 }); 91 });
58 92
59 //品牌多选 93 //品牌多选
60 -$('#brand-multi').click(function() { 94 +$brandMulti.click(function() {
61 if ($brandPanel.css('display') === 'none') { 95 if ($brandPanel.css('display') === 'none') {
62 96
63 //显示品牌面板 97 //显示品牌面板
@@ -86,7 +120,139 @@ $brandMore.click(function() { @@ -86,7 +120,139 @@ $brandMore.click(function() {
86 $(this).toggleClass('more'); 120 $(this).toggleClass('more');
87 }); 121 });
88 122
  123 +//品牌索引
  124 +$('.brands-index').on('click', 'span', function() {
  125 + var $this = $(this),
  126 + index = $this.data('index');
  127 +
  128 + if ($this.index() === 0) {
  129 +
  130 + //全部
  131 + $brandAttrs.removeClass('hide');
  132 + } else {
  133 + $brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
  134 + }
  135 +});
  136 +
  137 +//品牌搜索
  138 +$('#brand-search-input').keyup(function() {
  139 + var val = $(this).val().toLowerCase();
  140 +
  141 + if (val === '') {
  142 + $brandAttrs.removeClass('hide');
  143 + } else {
  144 + $brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
  145 + }
  146 +});
  147 +
  148 +$('#brand-multi-ok').click(function() {
  149 + var val = '';
  150 +
  151 + if ($(this).hasClass('dis')) {
  152 + return;
  153 + }
  154 +
  155 + $brandPanel.find('.checked').each(function() {
  156 + var id = $(this).data('id');
  157 +
  158 + val += (val === '') ? id : (',' + id);
  159 + });
  160 +
  161 + uriLoc('brand', val);
  162 +});
  163 +
  164 +//多选取消(品牌/高级选项)
  165 +$('.multi-select-cancel').click(function() {
  166 + var $panel = $(this).closest('.multi');
  167 +
  168 + if ($panel.hasClass('brand-panel')) {
  169 + brandHideMore();
  170 +
  171 + $brandMulti.removeClass('hide'); //显示多选按钮
  172 + }
  173 +
  174 + $panel.removeClass('multi');
  175 + clearChecked($panel.find('.checkbox.checked')); //清除选中状态
  176 +});
  177 +
  178 +//用户定义价格处理
  179 +(function() {
  180 + var $udPrice = $('.ud-price-range'),
  181 + interReg = /^\d+$/,
  182 + $limit, $min, $max, $btn;
  183 +
  184 + if ($udPrice.length === 0) {
  185 + return;
  186 + }
  187 +
  188 + $limit = $udPrice.find('.limit');
  189 + $min = $limit.filter('.min');
  190 + $max = $limit.filter('.max');
  191 + $btn = $udPrice.find('.price-sure');
  192 +
  193 + $limit.keyup(function() {
  194 + var min = $.trim($min.val()),
  195 + max = $.trim($max.val()),
  196 + isMinInt = interReg.test(min),
  197 + isMaxInt = interReg.test(max);
  198 +
  199 + if (isMaxInt && (min === '' || isMinInt) ||
  200 + isMinInt && (max === '' || isMaxInt)
  201 + ) {
  202 + $btn.removeClass('hide');
  203 + } else {
  204 + $btn.addClass('hide');
  205 + }
  206 + });
  207 +
  208 + //价格多项查询
  209 + $btn.click(function() {
  210 + var min = $.trim($min.val()),
  211 + max = $.trim($max.val()),
  212 + tmp;
  213 +
  214 + //对于min大于max的情况，交换位置
  215 + if (min !== '' && max !== '' && +min > +max) {
  216 + tmp = max;
  217 + max = min;
  218 + min = tmp;
  219 + }
  220 +
  221 + uriLoc('price', min + ',' + max);
  222 + });
  223 +}());
  224 +
  225 +//高级选项
  226 +$('.senior-attr-wrap').on('mouseenter', '.attr', function() {
  227 + $(this).children('.sub').removeClass('hide');
  228 +}).on('mouseleave', '.attr', function() {
  229 + $(this).children('.sub').addClass('hide');
  230 +});
  231 +
89 //高级选项多选 232 //高级选项多选
90 -$('.sub-senior-wrap').on('click', '.multi-select', function() { 233 +$('.sub').on('click', '.multi-select', function() {
  234 + $(this).closest('.sub').addClass('multi');
  235 +}).on('click', '.multi-select-ok', function() {
  236 + var $btn = $(this),
  237 + $sub = $btn.closest('.sub'),
  238 + val = '';
91 239
  240 + if ($btn.hasClass('dis')) {
  241 + return;
  242 + }
  243 +
  244 + $sub.find('.checked').each(function() {
  245 + var id = $(this).data('id');
  246 +
  247 + val += (val === '') ? id : (',' + id);
  248 + });
  249 +
  250 + uriLoc($sub.data('attr'), val);
  251 +});
  252 +
  253 +//当多选时阻止品牌和高级选项的默认跳转
  254 +$('.brand, .senior').on('click', '.attr > a', function(e) {
  255 + if ($(this).closest('.multi').length > 0) {
  256 + e.preventDefault();
  257 + }
92 }); 258 });
@@ -49,7 +49,7 @@ a { @@ -49,7 +49,7 @@ a {
49 } 49 }
50 50
51 .hide { 51 .hide {
52 - display: none; 52 + display: none !important;
53 } 53 }
54 54
55 a:focus { 55 a:focus {
@@ -90,6 +90,8 @@ @@ -90,6 +90,8 @@
90 90
91 span { 91 span {
92 margin: 0 5px; 92 margin: 0 5px;
  93 + cursor: pointer;
  94 + -moz-user-select: none;
93 95
94 &:first-child { 96 &:first-child {
95 margin-left: 10px; 97 margin-left: 10px;
@@ -100,6 +102,7 @@ @@ -100,6 +102,7 @@
100 .brand-search { 102 .brand-search {
101 float: left; 103 float: left;
102 height: 18px; 104 height: 18px;
  105 + line-height: 18px;
103 border: 1px solid #b0b0b0; 106 border: 1px solid #b0b0b0;
104 margin-top: 5px; 107 margin-top: 5px;
105 margin-left: 15px; 108 margin-left: 15px;
@@ -119,6 +122,7 @@ @@ -119,6 +122,7 @@
119 background: #b0b0b0; 122 background: #b0b0b0;
120 color: #fff; 123 color: #fff;
121 text-align: center; 124 text-align: center;
  125 + cursor: default;
122 } 126 }
123 } 127 }
124 128
@@ -126,6 +130,7 @@ @@ -126,6 +130,7 @@
126 padding: 15px 20px; 130 padding: 15px 20px;
127 margin-top: 5px; 131 margin-top: 5px;
128 background: #f4f7f6; 132 background: #f4f7f6;
  133 + min-height: 30px;
129 } 134 }
130 } 135 }
131 136
@@ -147,6 +152,11 @@ @@ -147,6 +152,11 @@
147 color: #fff; 152 color: #fff;
148 font-size: 15px; 153 font-size: 15px;
149 margin-right: 15px; 154 margin-right: 15px;
  155 + cursor: pointer;
  156 +
  157 + &.dis {
  158 + background: #ccc;
  159 + }
150 } 160 }
151 161
152 .ud-price-range { 162 .ud-price-range {
@@ -182,21 +192,36 @@ @@ -182,21 +192,36 @@
182 margin-right: 5px; 192 margin-right: 5px;
183 } 193 }
184 194
185 - .sub-senior-wrap { 195 + .senior-attr-wrap {
186 position: relative; 196 position: relative;
187 - padding: 15px;  
188 197
189 .sub { 198 .sub {
190 - max-width: 950px;  
191 - }  
192 -  
193 - .multi-select { 199 + box-sizing: border-box;
194 position: absolute; 200 position: absolute;
195 - top: 15px;  
196 - right: 15px; 201 + padding: 15px;
  202 + left: 0;
  203 + right: -16px;
  204 + background: #fff;
  205 + border: 1px solid #ccc;
  206 +
  207 + ul {
  208 + max-width: 950px;
  209 + }
  210 +
  211 + &.multi .multi-select {
  212 + display: none;
  213 + }
  214 +
  215 + .multi-select {
  216 + position: absolute;
  217 + top: 20px;
  218 + right: 15px;
  219 + }
197 } 220 }
198 } 221 }
199 222
  223 +
  224 +
200 .checkbox { 225 .checkbox {
201 display: none; 226 display: none;
202 } 227 }
@@ -107,31 +107,36 @@ class IndexController extends AbstractAction @@ -107,31 +107,36 @@ class IndexController extends AbstractAction
107 'id' => '1', 107 'id' => '1',
108 'href' => '', 108 'href' => '',
109 'index' => '0-9', 109 'index' => '0-9',
110 - 'name' => '5cm' 110 + 'name' => '5cm',
  111 + 'key' => '5cm'
111 ), 112 ),
112 array( 113 array(
113 'id' => '2', 114 'id' => '2',
114 'href' => '', 115 'href' => '',
115 'index' => 'k', 116 'index' => 'k',
116 - 'name' => 'KTZ' 117 + 'name' => 'KTZ',
  118 + 'key' => 'ktz'
117 ), 119 ),
118 array( 120 array(
119 'id' => '3', 121 'id' => '3',
120 'href' => '', 122 'href' => '',
121 'index' => 't', 123 'index' => 't',
122 - 'name' => 'Tapenade特芙娜' 124 + 'name' => 'Tapenade特芙娜',
  125 + 'key' => 'tapenade特芙娜'
123 ), 126 ),
124 array( 127 array(
125 'id' => '4', 128 'id' => '4',
126 'href' => '', 129 'href' => '',
127 'index' => 'j', 130 'index' => 'j',
128 - 'name' => '金银帝国Imperial Taels' 131 + 'name' => '金银帝国Imperial Taels',
  132 + 'key' => '金银帝国imperial taels'
129 ), 133 ),
130 array( 134 array(
131 'id' => '5', 135 'id' => '5',
132 'href' => '', 136 'href' => '',
133 'index' => 'a', 137 'index' => 'a',
134 - 'name' => 'ABLE JEANS' 138 + 'name' => 'ABLE JEANS',
  139 + 'key' => 'able jeans'
135 ) 140 )
136 ) 141 )
137 ), 142 ),
@@ -171,18 +176,35 @@ class IndexController extends AbstractAction @@ -171,18 +176,35 @@ class IndexController extends AbstractAction
171 array( 176 array(
172 'attr' => 'style', 177 'attr' => 'style',
173 'name' => '风格', 178 'name' => '风格',
  179 + 'showMulti' => true,
174 'sub' => array( 180 'sub' => array(
175 array( 181 array(
176 - 'id' => '', 182 + 'id' => '1',
177 'href' => '', 183 'href' => '',
178 'name' => '街头' 184 'name' => '街头'
179 ), 185 ),
180 array( 186 array(
181 - 'id' => '', 187 + 'id' => '2',
182 'href' => '', 188 'href' => '',
183 'name' => '简约' 189 'name' => '简约'
184 ) 190 )
185 ) 191 )
  192 + ),
  193 + array(
  194 + 'attr' => 'weather',
  195 + 'name' => '适用季节',
  196 + 'sub' => array(
  197 + array(
  198 + 'id' => '1',
  199 + 'href' => '',
  200 + 'name' => '春天'
  201 + ),
  202 + array(
  203 + 'id' => '2',
  204 + 'href' => '',
  205 + 'name' => '夏天'
  206 + )
  207 + )
186 ) 208 )
187 ) 209 )
188 ) 210 )