Authored by 周少峰

Merge branch 'feature/filterSize' into gray

@@ -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">&#xe60b;</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 {