yoho filter

@@ -89,6 +89,32 @@
         }
         }
     }
     }
 
 
+### 筛选
+
+    {
+        filter: {
+            classify: [
+                {
+                    title: '性别',
+                    default: true/false,
+                    name: '全部性别',
+                    dataType: 'gender', //查询时字段名
+                    subs: [
+                        {
+                            dataId: 0,
+                            name: '全部性别',
+                            chosed: true //是否当前选中
+                        },
+                        ...
+                    ]
+                },
+                {
+                    ...
+                }
+            ]
+        }
+    }
+
 ## 首页
 ## 首页
  
  
     {
     {

+/**
+ * 筛选JS
+ * 暴露三个接口：注册回调、显示filter、隐藏filter
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/19
+ */
+
+var $ = require('yoho.zepto');
+
+var $filter = $('#yoho-filter');
+
+var $classify = $filter.find('.classify'),
+    $subClassify = $filter.find('.sub-classify');
+
+var cbFn;
+
+//隐藏筛选界面
+function hideFilter() {
+    $filter.addClass('hide');
+}
+
+//显示筛选界面
+function showFilter() {
+    $filter.removeClass('hide');
+}
+
+//注册sub-classify点击后的回调
+function registerCbFn(cb) {
+    cbFn = cb;
+}
+
+//初始化sub高度与classify高度一致
+$subClassify.height($classify.height());
+
+//设置完高度后显示sub并设置选中
+$classify.children(':first-child').addClass('active'); //T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁
+
+//classify switch
+$classify.delegate('.classify-item', 'touchstart', function() {
+    var $this = $(this);
+
+    if ($this.hasClass('active')) {
+        return;
+    }
+
+    $this.siblings('.active').removeClass('active');
+
+    $this.addClass('active');
+});
+
+//点击Mask隐藏筛选界面
+$filter.children('.filter-mask').click(function() {
+    hideFilter();
+});
+
+$subClassify.delegate('li', 'click', function(e) {
+    var $this = $(this),
+        id = $this.data('id');
+
+    var $sub = $this.closest('.sub-classify');
+
+    var $shower = $sub.siblings('.shower');
+
+    var html, shower;
+
+    e.stopPropagation();
+
+    if ($this.hasClass('chosed')) {
+        return;
+    }
+
+    $sub.children('.chosed').removeClass('chosed');
+    $this.addClass('chosed');
+
+    html = $.trim($this.html());
+
+    shower = $.trim($shower.html());
+
+    $shower.html(
+        shower.substring(0, shower.indexOf('</span>') + 7) + //拆分出shower的title
+        html.substring(0, html.indexOf('<i')) //拆分选中筛选值
+    );
+
+    if ($this.index() === 0) {
+        $shower.addClass('default');
+    } else {
+        $shower.removeClass('default');
+    }
+
+    if (cbFn) {
+        cbFn({
+            type: $sub.data('type'),
+            id: id
+        });
+    }
+
+    hideFilter();
+});
+
+
+exports.showFilter = showFilter;
+
+exports.hideFilter = hideFilter;
+
+exports.registerCbFn = registerCbFn;

+.filter-mask, .filter-body {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+
+.filter-mask {
+    height: 100%;
+    background: rgba(0,0,0,0.1);
+}
+
+.filter-body {
+    position: relative;
+    background: #fff;
+    color: #000;
+    cursor: pointer;
+    font-size: 14px;
+    
+    .classify {
+        width: 50%;
+
+        > li {
+            background: #f8f8f8;
+            height: 60px;
+            line-height: 60px;
+
+            > * {
+                box-sizing: border-box;
+            }
+
+            &.active {
+                background: #fff;
+            }
+
+            .shower {
+                padding-left: 20px;
+                width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .default {
+                color: #999;
+            }
+
+            .title {
+                float: left;
+                color: #000;
+            }
+        }
+    }
+
+    .sub-classify {
+        position: absolute;
+        display: none;
+        width: 50%;
+        padding-left: 15px;
+        left: 50%;
+        top: 0;
+        overflow: auto;
+
+        > li {
+            height: 60px;
+            line-height: 60px;
+            border-bottom: 1px solid #e6e6e6;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        .chosed-icon {
+            display: none;
+        }
+
+        .chosed .chosed-icon {
+            display: inline;
+        }
+    }
+
+    .active > .sub-classify {
+        display: block;
+    }
+}

@@ -111,4 +111,4 @@ a {
     @include border-radius(10px);
     @include border-radius(10px);
 }
 }
 
 
-@import "layout/header", "layout/footer", "good", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index";
+@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index";

+{{# filter}}
+    <div id="yoho-filter">
+        <div class="filter-mask"></div>
+        <div class="filter-body">
+            <ul class="classify">
+                {{#each classify}}
+                    <li class="classify-item">
+                        <p class="shower{{#if default}} default{{/if}}">
+                            <span class="title">{{title}}：</span>
+                            {{name}}
+                        </p>
+                        <ul class="sub-classify" data-type={{dataType}}>
+                            {{# subs}}
+                                <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}>
+                                    {{name}}
+                                    <i class="iconfont chosed-icon">&#xe617;</i>
+                                </li>
+                            {{/ subs}}
+                        </ul>
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    </div>
+{{/ filter}}