filter logic/style change
Showing
3 changed files
with
26 additions
and
33 deletions
| @@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
| 7 | 7 | ||
| 8 | var $ = require('yoho.zepto'); | 8 | var $ = require('yoho.zepto'); |
| 9 | 9 | ||
| 10 | -var $filter = $('#yoho-filter'); | 10 | +var $filter = $('.filter-mask, .filter-body'); |
| 11 | 11 | ||
| 12 | var $classify = $filter.find('.classify'), | 12 | var $classify = $filter.find('.classify'), |
| 13 | $subClassify = $filter.find('.sub-classify'); | 13 | $subClassify = $filter.find('.sub-classify'); |
| @@ -29,9 +29,6 @@ function registerCbFn(cb) { | @@ -29,9 +29,6 @@ function registerCbFn(cb) { | ||
| 29 | cbFn = cb; | 29 | cbFn = cb; |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | -//初始化sub高度与classify高度一致 | ||
| 33 | -$subClassify.height($classify.height()); | ||
| 34 | - | ||
| 35 | //设置完高度后显示sub并设置选中 | 32 | //设置完高度后显示sub并设置选中 |
| 36 | $classify.children(':first-child').addClass('active'); //T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁 | 33 | $classify.children(':first-child').addClass('active'); //T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁 |
| 37 | 34 | ||
| @@ -49,7 +46,7 @@ $classify.delegate('.classify-item', 'touchstart', function() { | @@ -49,7 +46,7 @@ $classify.delegate('.classify-item', 'touchstart', function() { | ||
| 49 | }); | 46 | }); |
| 50 | 47 | ||
| 51 | //点击Mask隐藏筛选界面 | 48 | //点击Mask隐藏筛选界面 |
| 52 | -$filter.children('.filter-mask').click(function() { | 49 | +$filter.filter('.filter-mask').click(function() { |
| 53 | hideFilter(); | 50 | hideFilter(); |
| 54 | }); | 51 | }); |
| 55 | 52 |
| @@ -11,17 +11,18 @@ | @@ -11,17 +11,18 @@ | ||
| 11 | } | 11 | } |
| 12 | 12 | ||
| 13 | .filter-body { | 13 | .filter-body { |
| 14 | - position: relative; | ||
| 15 | background: #fff; | 14 | background: #fff; |
| 16 | color: #000; | 15 | color: #000; |
| 17 | cursor: pointer; | 16 | cursor: pointer; |
| 18 | font-size: 14px; | 17 | font-size: 14px; |
| 18 | + height: 440px; | ||
| 19 | 19 | ||
| 20 | .classify { | 20 | .classify { |
| 21 | width: 50%; | 21 | width: 50%; |
| 22 | + height: 100%; | ||
| 23 | + background: #f8f8f8; | ||
| 22 | 24 | ||
| 23 | > li { | 25 | > li { |
| 24 | - background: #f8f8f8; | ||
| 25 | height: 60px; | 26 | height: 60px; |
| 26 | line-height: 60px; | 27 | line-height: 60px; |
| 27 | 28 | ||
| @@ -56,6 +57,7 @@ | @@ -56,6 +57,7 @@ | ||
| 56 | position: absolute; | 57 | position: absolute; |
| 57 | display: none; | 58 | display: none; |
| 58 | width: 50%; | 59 | width: 50%; |
| 60 | + height: 440px; | ||
| 59 | padding-left: 15px; | 61 | padding-left: 15px; |
| 60 | left: 50%; | 62 | left: 50%; |
| 61 | top: 0; | 63 | top: 0; |
| @@ -68,10 +70,6 @@ | @@ -68,10 +70,6 @@ | ||
| 68 | overflow: hidden; | 70 | overflow: hidden; |
| 69 | white-space: nowrap; | 71 | white-space: nowrap; |
| 70 | text-overflow: ellipsis; | 72 | text-overflow: ellipsis; |
| 71 | - | ||
| 72 | - &:last-child { | ||
| 73 | - border-bottom: none; | ||
| 74 | - } | ||
| 75 | } | 73 | } |
| 76 | 74 | ||
| 77 | .chosed-icon { | 75 | .chosed-icon { |
| 1 | {{# filter}} | 1 | {{# filter}} |
| 2 | - <div id="yoho-filter"> | ||
| 3 | - <div class="filter-mask"></div> | ||
| 4 | - <div class="filter-body"> | ||
| 5 | - <ul class="classify"> | ||
| 6 | - {{#each classify}} | ||
| 7 | - <li class="classify-item"> | ||
| 8 | - <p class="shower{{#if default}} default{{/if}}"> | ||
| 9 | - <span class="title">{{title}}：</span> | ||
| 10 | - {{name}} | ||
| 11 | - </p> | ||
| 12 | - <ul class="sub-classify" data-type={{dataType}}> | ||
| 13 | - {{# subs}} | ||
| 14 | - <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}> | ||
| 15 | - {{name}} | ||
| 16 | - <i class="iconfont chosed-icon"></i> | ||
| 17 | - </li> | ||
| 18 | - {{/ subs}} | ||
| 19 | - </ul> | ||
| 20 | - </li> | ||
| 21 | - {{/each}} | ||
| 22 | - </ul> | ||
| 23 | - </div> | 2 | + <div class="filter-mask hide"></div> |
| 3 | + <div class="filter-body hide"> | ||
| 4 | + <ul class="classify"> | ||
| 5 | + {{#each classify}} | ||
| 6 | + <li class="classify-item"> | ||
| 7 | + <p class="shower{{#if default}} default{{/if}}"> | ||
| 8 | + <span class="title">{{title}}：</span> | ||
| 9 | + {{name}} | ||
| 10 | + </p> | ||
| 11 | + <ul class="sub-classify" data-type={{dataType}}> | ||
| 12 | + {{# subs}} | ||
| 13 | + <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}> | ||
| 14 | + {{name}} | ||
| 15 | + <i class="iconfont chosed-icon"></i> | ||
| 16 | + </li> | ||
| 17 | + {{/ subs}} | ||
| 18 | + </ul> | ||
| 19 | + </li> | ||
| 20 | + {{/each}} | ||
| 21 | + </ul> | ||
| 24 | </div> | 22 | </div> |
| 25 | {{/ filter}} | 23 | {{/ filter}} |
-
Please register or login to post a comment