商品分类模版提交

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Fri Apr 22 09:51:41 2016
+Created by FontForge 20120731 at Mon Apr 25 11:38:52 2016
  By admin
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Fri Apr 22 09:51:41 2016
     bbox="-0.75 -224 3943 896"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E649"
+    unicode-range="U+0078-E64A"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -266,5 +266,7 @@ t99.5 148.5t148.5 99.5t181 37t181 -37t148.5 -99.5t99.5 -148.5t37 -181t-37 -181t-
     <glyph glyph-name="uniE649" unicode="&#xe649;" 
 d="M875 126l-363 -164l-363 164v610q247 75 363 75t363 -75v-610zM930 808q-34 11 -84.5 26t-159.5 38.5t-174 23.5t-174 -23.5t-159.5 -38.5t-84.5 -26q-14 -4 -22 -15.5t-8 -25.5v-669q0 -27 25 -39l405 -183q9 -3 18 -3t18 3l405 183q25 12 25 39v669q0 14 -8 25.5
 t-22 15.5zM751 552v83h-473v-83h206v-298h-72v237h-87v-237h-66v-84h506v84h-193v119h151v83h-151v96h179z" />
+    <glyph glyph-name="uniE64A" unicode="&#xe64a;" horiz-adv-x="1000" 
+d="M662 566v-499l-299 250zM662 566z" />
   </font>
 </defs></svg>

 /**
  * 分类
- * @author: xuqi<qi.xu@yoho.cn>
- * @date: 2015/10/14
+ * @author: berry<lixia.zhang@yoho.cn>
+ * @date: 2016/4/25
  */
+var $ = require('jquery');
+
+var $allProductCell = $('.allproduct'),
+    $categoryContainer = $('.category-container'),
+    $contents = $categoryContainer.children('.content'),
+    $subLevelItem = $categoryContainer.find('.sub-level li'),
+    $primaryItem = $categoryContainer.find('.primary-level li');
+
+//初始化container高度
+(function() {
+    var $header = $('.yoho-header');
+
+    var h = $(window).height() - $header.outerHeight() - $allProductCell.outerHeight();
+
+    $categoryContainer.css('min-height', h);
+
+    $contents.height(h);
+
+}());
+
+
+$categoryContainer.on('touchend', function(e) {
+    var $this = $(e.target),
+        $subLevel,
+        $cur, index,
+        $subLevelContainer, $trilangleItem;
+
+    $cur = $this.closest('.p-level-item');
+
+    $subLevelContainer = $this.closest('.content').find('.sub-level-container');
+    $subLevelContainer.removeClass('hide');
+
+    if ($cur.length > 0) {
+        index = $cur.index();
+        $subLevel = $this.closest('.content').find('.sub-level');
+        $trilangleItem = $this.closest('.content').find('.primary-level-trilangle');
+
+        if ($this.hasClass('focus')) {
+            return;
+        }
+
+        //$this.closest('.primary-level').children('.focus').removeClass('focus');
+        //$this.addClass('focus');
+
+        $subLevel.not('.hide').addClass('hide');
+        $subLevel.eq(index).removeClass('hide');
+
+        $trilangleItem.not('.hide').addClass('hide');
+        $trilangleItem.eq(index).removeClass('hide');
+
+    }
+});
+
+$categoryContainer.find('.primary-level').on('touchstart touchend touchcancel', 'li', function() {
+    $primaryItem.removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', 'li', function() {
+    $(this).removeClass('highlight');
+});
+
+$categoryContainer.find('.sub-level').on('touchstart', 'li', function() {
+    $subLevelItem.removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', 'li', function() {
+    $(this).removeClass('highlight');
+});
\ No newline at end of file

 .product-category {
     font-size: 30rem / $pxConvertRem;
+    background-color: #fff;
 
     .allproduct {
         position: relative;
@@ -7,8 +8,19 @@
         background: #f8f8f8;
         border-top: 15px;
         border-bottom: 15px;
+        padding-left: 32rem / $pxConvertRem;
+        border-top: 1px solid #e6e6e6;
     }
 
+    .margin-under-allproduct{
+        width: 100%;
+        height: 30rem / $pxConvertRem;
+        background-color: #f0f0f0;
+    }
+
+    .category-container{
+        border-top: 1px solid #e6e6e6;
+    }
     .arrow-icon {
         position: absolute;
         font-size: 12px;
@@ -20,49 +32,6 @@
         font-size: 18px;
         left: 20px;
     }
-    
-    .category-nav {
-        height: 70rem / $pxConvertRem;
-        border-bottom: 1px solid #e6e6e6;
-
-        li {
-            display: block;
-            box-sizing: border-box;
-            float: left;
-            height: 100%;
-            padding: 20rem / $pxConvertRem 0;
-            width: 25%;
-            text-align: center;
-            color: #999;
-
-            &:last-child {
-                border-right: none;
-            }
-
-            &.focus {
-                color: #000;
-            }
-
-            &.bytouch{
-                background:#eee;
-            }
-        }
-
-
-
-        span {
-            display: block;
-            width: 100%;
-            height: 30rem / $pxConvertRem;
-            line-height: 30rem / $pxConvertRem;
-            font-size: 30rem / $pxConvertRem;
-            border-right: 1px solid #e6e6e6;
-        }
-
-        li:last-child span {
-            border-right: 0;
-        }
-    }
 
     .content {
         background: #f8f8f8;
@@ -78,22 +47,33 @@
         width: 100%;
         position: absolute;
         > li {
+            position:relative;
             height: 89rem / $pxConvertRem;
             line-height: 89rem / $pxConvertRem;
             padding-left: 32rem / $pxConvertRem;
             box-sizing: border-box;
             border-bottom: 1px solid #e6e6e6;
+            background-color: #fff;
+        }
+    }
 
-            &.focus {
-                background-color: #fff;
-            }
+    .primary-level-trilangle{
+        float:right;
+        margin-right:56%;
+    }
 
-            &.highlight {
-                background-color: #eee;
-            }
-        }
+    .trilanglefont {
+        font-family: "iconfont" !important;
+        font-size: 30px;
+        font-style: normal;
+        text-decoration: none;
+        -webkit-font-smoothing: antialiased;
+        -webkit-text-stroke-width: 0.2px;
+        -moz-osx-font-smoothing: grayscale;
+        color: #f4f4f4;
     }
 
+
     .sub-level-container {
         float: right;
         box-sizing: border-box;

@@ -8,16 +8,18 @@
         <i class="arrow-icon iconfont">&#xe614;</i>
         </a>
     </div>
+    <div class="margin-under-allproduct">
+    </div>
     <div class="category-container clearfix">
         <div class="content">
             {{# content}}
             <ul class="primary-level">
                 {{# class}}
-                <li class="p-level-item{{#if @first}} focus{{/if}}">{{name}}</li>
-                {{/ class}}
-
+                <li class="p-level-item">{{name}}
+                    <div class="primary-level-trilangle trilanglefont hide">&#xe64a;</div>
+                </li>{{/ class}}
             </ul>
-            <div class="sub-level-container">
+            <div class="sub-level-container hide">
                 {{# category}}
                 <ul class="sub-level">
                     {{# subcategory}}

@@ -344,13 +344,13 @@
 {{!-- 品牌分类 --}}
 {{#if productCategoryPage}}
 <script>
-    seajs.use('js/prodcut/product-category');
+    seajs.use('js/product/product-category');
 </script>
 {{/if}}
 
 {{!-- 品牌店铺首页 --}}
 {{#if shop}}
 <script>
-    seajs.use('js/prodcut/shop');
+    seajs.use('js/product/shop');
 </script>
 {{/if}}
\ No newline at end of file