Merge branch 'feature/filterSize' into gray
Showing
4 changed files
with
73 additions
and
7 deletions
@@ -93,7 +93,7 @@ | @@ -93,7 +93,7 @@ | ||
93 | {{# colorSize}} | 93 | {{# colorSize}} |
94 | <ul class="sizeinfo" data-id="{{skc}}"> | 94 | <ul class="sizeinfo" data-id="{{skc}}"> |
95 | {{#each sizeList}} | 95 | {{#each sizeList}} |
96 | - <li data-id={{product_sku}} data-name={{size_name}}></li> | 96 | + <li data-id="{{product_sku}}" data-name="{{size_name}}"></li> |
97 | {{/each}} | 97 | {{/each}} |
98 | </ul> | 98 | </ul> |
99 | {{/ colorSize}} | 99 | {{/ colorSize}} |
@@ -207,11 +207,18 @@ | @@ -207,11 +207,18 @@ | ||
207 | <div class="size section {{#unless size}}hide{{/unless}}" {{#if size}}data-load="true"{{/if}}> | 207 | <div class="size section {{#unless size}}hide{{/unless}}" {{#if size}}data-load="true"{{/if}}> |
208 | <span class="title">尺码:</span> | 208 | <span class="title">尺码:</span> |
209 | 209 | ||
210 | - <div class="attr-content clearfix"> | ||
211 | - {{# size}} | ||
212 | - <a class="attr {{#if checked}}checked{{/if}}" href="{{href}}" name="{{name}}">{{name}}</a> | ||
213 | - {{/ size}} | 210 | + <div class="attr-content size-content clearfix"> |
211 | + <div class="size-block clearfix"> | ||
212 | + {{# size}} | ||
213 | + <a class="attr {{#if checked}}checked{{/if}}" href="{{href}}" name="{{name}}">{{name}}</a> | ||
214 | + {{/ size}} | ||
215 | + </div> | ||
214 | </div> | 216 | </div> |
217 | + | ||
218 | + <span id="size-more" class="size-more hide"> | ||
219 | + <em>更多</em> | ||
220 | + <i class="iconfont"></i> | ||
221 | + </span> | ||
215 | </div> | 222 | </div> |
216 | 223 | ||
217 | {{#if seniorChose}} | 224 | {{#if seniorChose}} |
@@ -33,6 +33,11 @@ var moreBrandLoaded = false, | @@ -33,6 +33,11 @@ var moreBrandLoaded = false, | ||
33 | 33 | ||
34 | var $brandMoreTxt, $brandMoreIcon; | 34 | var $brandMoreTxt, $brandMoreIcon; |
35 | 35 | ||
36 | +var $sizeMore = $('#size-more'), | ||
37 | + $sizeMoreTxt = $sizeMore.children('em'), | ||
38 | + $sizeMoreIcon = $sizeMore.children('.iconfont'), | ||
39 | + $sizeContent = $sizeMore.siblings('.attr-content'); | ||
40 | + | ||
36 | // 价格相关变量 | 41 | // 价格相关变量 |
37 | var $udPrice = $('.ud-price-range'), | 42 | var $udPrice = $('.ud-price-range'), |
38 | interReg = /^\d+$/, | 43 | interReg = /^\d+$/, |
@@ -444,6 +449,22 @@ $seniorAttrWrap.on('mouseenter', '.attr', function() { | @@ -444,6 +449,22 @@ $seniorAttrWrap.on('mouseenter', '.attr', function() { | ||
444 | }, 100); | 449 | }, 100); |
445 | }); | 450 | }); |
446 | 451 | ||
452 | +$sizeMore.click(function() { | ||
453 | + var $this = $(this), | ||
454 | + $wrap = $this.siblings('.attr-content'); | ||
455 | + | ||
456 | + if ($wrap.hasClass('more')) { | ||
457 | + $sizeMoreTxt.text('更多'); | ||
458 | + $sizeMoreIcon.html(moreUnicode.down); | ||
459 | + $wrap.scrollTop(0); | ||
460 | + } else { | ||
461 | + $sizeMoreTxt.text('收起'); | ||
462 | + $sizeMoreIcon.html(moreUnicode.up); | ||
463 | + } | ||
464 | + | ||
465 | + $wrap.toggleClass('more'); | ||
466 | +}); | ||
467 | + | ||
447 | // 【高级选项】多选 | 468 | // 【高级选项】多选 |
448 | $('.senior-sub').on('click', '.multi-select', function() { | 469 | $('.senior-sub').on('click', '.multi-select', function() { |
449 | $(this).closest('.senior-sub').addClass('multi'); | 470 | $(this).closest('.senior-sub').addClass('multi'); |
@@ -504,3 +525,12 @@ $('.senior-sub').on('click', '.multi-select', function() { | @@ -504,3 +525,12 @@ $('.senior-sub').on('click', '.multi-select', function() { | ||
504 | 525 | ||
505 | }()); | 526 | }()); |
506 | 527 | ||
528 | +(function setSizeMoreBtnDisplay() { | ||
529 | + var bh = $sizeContent.height(), | ||
530 | + ch = $sizeContent.children().height(); | ||
531 | + | ||
532 | + if (ch > bh) { | ||
533 | + $sizeMore.removeClass('hide'); | ||
534 | + } | ||
535 | +}()); | ||
536 | + |
@@ -94,8 +94,37 @@ | @@ -94,8 +94,37 @@ | ||
94 | -moz-user-select: none; | 94 | -moz-user-select: none; |
95 | } | 95 | } |
96 | 96 | ||
97 | - .color .attr { | ||
98 | - margin-right: 0; | 97 | + .color { |
98 | + .attr-content { | ||
99 | + margin-right: 100px; | ||
100 | + } | ||
101 | + | ||
102 | + .attr { | ||
103 | + margin-right: 0; | ||
104 | + } | ||
105 | + } | ||
106 | + | ||
107 | + .size { | ||
108 | + position: relative; | ||
109 | + | ||
110 | + .size-content { | ||
111 | + margin-right: 130px; | ||
112 | + max-height: 62px; | ||
113 | + overflow-y: hidden; | ||
114 | + } | ||
115 | + | ||
116 | + .size-content.more { | ||
117 | + max-height: 150px; | ||
118 | + overflow-y: auto; | ||
119 | + } | ||
120 | + | ||
121 | + .size-more { | ||
122 | + position: absolute; | ||
123 | + right: 92px; | ||
124 | + top: 15px; | ||
125 | + color: #555; | ||
126 | + cursor: pointer; | ||
127 | + } | ||
99 | } | 128 | } |
100 | 129 | ||
101 | .checked .color-block { | 130 | .checked .color-block { |
-
Please register or login to post a comment