Authored by xuqi

sort

@@ -33,12 +33,28 @@ @@ -33,12 +33,28 @@
33 <div class="sort section"> 33 <div class="sort section">
34 <span class="title">分类:</span> 34 <span class="title">分类:</span>
35 35
36 - <div class="attr-content clearfix">  
37 - {{#each sort}}  
38 - <span class="attr" data-id="{{id}}">  
39 - {{name}}  
40 - </span>  
41 - {{/each}} 36 + <div class="attr-content">
  37 + <ul class="sort-pre clearfix">
  38 + {{#each sort}}
  39 + <li>
  40 + <span class="attr" data-id="{{id}}">
  41 + {{name}}
  42 + </span>
  43 + </li>
  44 + {{/each}}
  45 + </ul>
  46 +
  47 + <div class="sort-sub-wrap">
  48 + {{#each sort}}
  49 + <ul class="sort-sub clearfix hide">
  50 + {{#each sub}}
  51 + <li class="attr">
  52 + <a href="{{href}}">{{name}}</a>
  53 + </li>
  54 + {{/each}}
  55 + </ul>
  56 + {{/each}}
  57 + </div>
42 </div> 58 </div>
43 </div> 59 </div>
44 {{/if}} 60 {{/if}}
@@ -160,7 +176,7 @@ @@ -160,7 +176,7 @@
160 {{name}} 176 {{name}}
161 <span class="iconfont"></span> 177 <span class="iconfont"></span>
162 178
163 - <div class="sub hide" data-attr="{{attr}}"> 179 + <div class="senior-sub hide" data-attr="{{attr}}">
164 {{#if showMulti}} 180 {{#if showMulti}}
165 <span class="multi-select">多选 +</span> 181 <span class="multi-select">多选 +</span>
166 {{/if}} 182 {{/if}}
@@ -15,6 +15,7 @@ moreUnicode = { @@ -15,6 +15,7 @@ moreUnicode = {
15 down: '&#xe600;' 15 down: '&#xe600;'
16 }; 16 };
17 17
  18 +//品牌相关变量
18 var $brandDefault = $('.brand .default'), 19 var $brandDefault = $('.brand .default'),
19 $brandPanel = $('.brand .brand-panel'), 20 $brandPanel = $('.brand .brand-panel'),
20 $brandAttrs = $('.brand .attr'), 21 $brandAttrs = $('.brand .attr'),
@@ -23,6 +24,14 @@ var $brandDefault = $('.brand .default'), @@ -23,6 +24,14 @@ var $brandDefault = $('.brand .default'),
23 24
24 var $brandMoreTxt, $brandMoreIcon; 25 var $brandMoreTxt, $brandMoreIcon;
25 26
  27 +//价格相关变量
  28 +var $udPrice = $('.ud-price-range'),
  29 + interReg = /^\d+$/,
  30 + $limit, $min, $max, $btn;
  31 +
  32 +//分类相关变量
  33 +var $sortSub = $('.sort-sub-wrap');
  34 +
26 //清除checkbox选中状态 35 //清除checkbox选中状态
27 function clearChecked($checkbox) { 36 function clearChecked($checkbox) {
28 $checkbox.removeClass('checked').html(checkUnicode.unchecked); 37 $checkbox.removeClass('checked').html(checkUnicode.unchecked);
@@ -55,16 +64,25 @@ function uriLoc(attr, val) { @@ -55,16 +64,25 @@ function uriLoc(attr, val) {
55 window.location.href = newHref; 64 window.location.href = newHref;
56 } 65 }
57 66
58 -if ($brandMore.length > 0) {  
59 - $brandMoreTxt = $brandMore.children('em');  
60 - $brandMoreIcon = $brandMore.children('.iconfont');  
61 -}  
62 -  
63 //屏蔽筛选项双击文字选中 67 //屏蔽筛选项双击文字选中
64 $('.filter-box').on('selectstart', '.attr, .brands-index span', function() { 68 $('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
65 return false; 69 return false;
66 }); 70 });
67 71
  72 +//【分类】
  73 +$('.sort-pre').on('click', 'li', function() {
  74 + var index = $(this).index();
  75 +
  76 + $sortSub.children(':not(.hide)').addClass('hide');
  77 + $sortSub.children(':eq(' + index + ')').removeClass('hide');
  78 +});
  79 +
  80 +//【品牌】
  81 +if ($brandMore.length > 0) {
  82 + $brandMoreTxt = $brandMore.children('em');
  83 + $brandMoreIcon = $brandMore.children('.iconfont');
  84 +}
  85 +
68 //【品牌】多选 86 //【品牌】多选
69 $brandMulti.click(function() { 87 $brandMulti.click(function() {
70 if ($brandPanel.css('display') === 'none') { 88 if ($brandPanel.css('display') === 'none') {
@@ -183,20 +201,13 @@ $('.brand, .senior').on('click', '.attr > a', function(e) { @@ -183,20 +201,13 @@ $('.brand, .senior').on('click', '.attr > a', function(e) {
183 }); 201 });
184 202
185 //【价格】用户定义价格处理 203 //【价格】用户定义价格处理
186 -(function() {  
187 - var $udPrice = $('.ud-price-range'),  
188 - interReg = /^\d+$/,  
189 - $limit, $min, $max, $btn;  
190 -  
191 - if ($udPrice.length === 0) {  
192 - return;  
193 - }  
194 - 204 +if ($udPrice.length > 0) {
195 $limit = $udPrice.find('.limit'); 205 $limit = $udPrice.find('.limit');
196 $min = $limit.filter('.min'); 206 $min = $limit.filter('.min');
197 $max = $limit.filter('.max'); 207 $max = $limit.filter('.max');
198 $btn = $udPrice.find('.price-sure'); 208 $btn = $udPrice.find('.price-sure');
199 209
  210 + //【价格】输入
200 $limit.keyup(function() { 211 $limit.keyup(function() {
201 var min = $.trim($min.val()), 212 var min = $.trim($min.val()),
202 max = $.trim($max.val()), 213 max = $.trim($max.val()),
@@ -212,7 +223,7 @@ $('.brand, .senior').on('click', '.attr > a', function(e) { @@ -212,7 +223,7 @@ $('.brand, .senior').on('click', '.attr > a', function(e) {
212 } 223 }
213 }); 224 });
214 225
215 - //价格多项查询 226 + //【价格】多项查询
216 $btn.click(function() { 227 $btn.click(function() {
217 var min = $.trim($min.val()), 228 var min = $.trim($min.val()),
218 max = $.trim($max.val()), 229 max = $.trim($max.val()),
@@ -227,21 +238,21 @@ $('.brand, .senior').on('click', '.attr > a', function(e) { @@ -227,21 +238,21 @@ $('.brand, .senior').on('click', '.attr > a', function(e) {
227 238
228 uriLoc('price', min + ',' + max); 239 uriLoc('price', min + ',' + max);
229 }); 240 });
230 -}()); 241 +}
231 242
232 //【高级选项】鼠标移入显示子项 243 //【高级选项】鼠标移入显示子项
233 $('.senior-attr-wrap').on('mouseenter', '.attr', function() { 244 $('.senior-attr-wrap').on('mouseenter', '.attr', function() {
234 - $(this).children('.sub').removeClass('hide'); 245 + $(this).children('.senior-sub').removeClass('hide');
235 }).on('mouseleave', '.attr', function() { 246 }).on('mouseleave', '.attr', function() {
236 - $(this).children('.sub').addClass('hide'); 247 + $(this).children('.senior-sub').addClass('hide');
237 }); 248 });
238 249
239 //【高级选项】多选 250 //【高级选项】多选
240 -$('.sub').on('click', '.multi-select', function() { 251 +$('.senior-sub').on('click', '.multi-select', function() {
241 $(this).closest('.sub').addClass('multi'); 252 $(this).closest('.sub').addClass('multi');
242 }).on('click', '.multi-select-ok', function() { 253 }).on('click', '.multi-select-ok', function() {
243 var $btn = $(this), 254 var $btn = $(this),
244 - $sub = $btn.closest('.sub'), 255 + $sub = $btn.closest('.senior-sub'),
245 val = ''; 256 val = '';
246 257
247 if ($btn.hasClass('dis')) { 258 if ($btn.hasClass('dis')) {
@@ -57,6 +57,14 @@ @@ -57,6 +57,14 @@
57 } 57 }
58 } 58 }
59 59
  60 + .sort-sub-wrap {
  61 + width: 100%;
  62 +
  63 + .sort-sub {
  64 + padding: 15px 0;
  65 + }
  66 + }
  67 +
60 .brand { 68 .brand {
61 position: relative; 69 position: relative;
62 70
@@ -195,10 +203,10 @@ @@ -195,10 +203,10 @@
195 .senior-attr-wrap { 203 .senior-attr-wrap {
196 position: relative; 204 position: relative;
197 205
198 - .sub { 206 + .senior-sub {
199 box-sizing: border-box; 207 box-sizing: border-box;
200 position: absolute; 208 position: absolute;
201 - padding: 15px; 209 + padding: 15px 0;
202 left: 0; 210 left: 0;
203 right: -16px; 211 right: -16px;
204 background: #fff; 212 background: #fff;
@@ -34,7 +34,21 @@ class IndexController extends AbstractAction @@ -34,7 +34,21 @@ class IndexController extends AbstractAction
34 'sort' => array( 34 'sort' => array(
35 array( 35 array(
36 'id' => '1', 36 'id' => '1',
37 - 'name' => '上衣' 37 + 'name' => '上衣',
  38 + 'sub' => array(
  39 + array(
  40 + 'href' => '',
  41 + 'name' => 'T恤'
  42 + ),
  43 + array(
  44 + 'href' => '',
  45 + 'name' => '棉袄'
  46 + ),
  47 + array(
  48 + 'href' => '',
  49 + 'name' => '外套'
  50 + )
  51 + )
38 ), 52 ),
39 array( 53 array(
40 'id' => '2', 54 'id' => '2',