Merge branch 'develop' into feature/my-order

-<style>
-    .demo-page {
-        padding: 10px;
-    }
-
-    .demo-page .title {
-        padding: 10px 0;
-    }
-
-    .demo-page .btn {
-        margin-bottom: 10px;
-    }
-
-
-    .demo-page .icon_lists span{
-        float: left;
-        width: 50px;
-        height: 30px;
-        text-align: center; 
-        margin-top: 10px; 
-    }
-
-    .demo-page .modality {
-        color: #219dd6;
-    }
-
-    .demo-page .modality span{
-        font-size: 20px;
-    }
-
-    .demo-page .sort {
-        color: #999;
-    }
-
-    .demo-page .sort span {
-        font-size: 20px;
-    }
-</style>
-<div class="demo-page blk-page">
-    {{# content}}
-        <p class="title">1.复选按钮</p>
-        {{#each checkbox}}
-            {{> icon/checkbox}}
-            <br><br>
-        {{/each}}
-
-        <p class="title">2.单选按钮</p>
-        {{#each radio}}
-            {{> icon/radio}}
-            <br><br>
-        {{/each}}
-
-        <p class="title">2.1 选中状态切换</p>
-
-        
-        {{#each genders}}
-        <div class="input-radio" data-value="{{value}}">
-            {{> icon/radio}}
-            <label>{{name}}</label>
-        </div>
-        {{/each}}
-
-        {{#each genders}}
-        <div class="input-checkbox" data-value="{{value}}">
-            {{> icon/checkbox}}
-            <label>{{name}}</label>
-        </div>
-        {{/each}}
-
-        <div class="check-msg"></div>
-
-        <p class="title">3. 按钮</p>
-        <span class="btn">普通按钮</span>
-        <span class="btn disable">不可点按钮</span>
-        <span class="btn red">红色按钮</span>
-        <span class="btn white">白色按钮</span>
-
-        <p class="title">4. 提示文字或者某些链接文字颜色</p>
-        <span class="blue">提示文字</span>
-        <a class="blue">Link text</a>
-    
-        <p class="title">5. input</p>
-        <input class="input" type="text">
-
-        <p class="bold title">6.文字加粗</p>
-
-        <p class="title">7. 浮动和clearfix</p>
-        <div class="clearfix" style="width: 300px;border: 1px solid #000;">
-            <p class="left">左浮动</p>
-            <p class="right">右浮动</p>
-        </div>
-
-        <p class="title">8. 显示和隐藏</p>
-        <div style="border: 1px solid #000;">
-            <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
-            <p><span class="block">我是block</span></p>
-            <p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
-            <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
-        </div>
-    
-        <p class="title">9. 分页组件</p>
-        <div style="border: 1px solid #000; height: 200px; padding: 5px;">
-           {{{ pagination paginationOpts }}}
-        </div>
-
-        <p class="title">10. 商品信息</p>
-        {{# goods}}
-            {{> goods}}
-        {{/ goods}}
-
-        <p class="title">11. 面包屑</p>
-        {{# navPath}}
-            {{> path-nav}}
-        {{/ navPath}}
-
-        <p class="title">12. 楼层</p>
-        {{# floor}}
-           {{> floor}}
-        {{/ floor}} 
-
-        <p class="title">13. 各类图标</p>
-        <div style="border: 1px solid #000;overflow: hidden;">
-            <ul class="icon_lists clear">
-                <div class="modality">
-                    {{> icon/truck}}
-                    {{# hook}}
-                        {{> icon/round-hook}}
-                    {{/ hook}}
-                    {{> icon/error-round}}
-                    {{> icon/doubt}}
-                    {{# warn}}
-                        {{> icon/warn}}
-                    {{/ warn}}
-                </div>
-
-                <div class="sort">
-                    {{> icon/clock}}
-                    {{> icon/praise}}
-                    {{> icon/delete}}
-                    {{> icon/up}}
-                    {{> icon/down}}
-                    {{> icon/solid-round}}
-                    {{> icon/collection}}
-                    {{> icon/bookmarks}}
-                    {{> icon/refresh}}
-                    {{> icon/headset}}
-                </div>
-            </ul>
-        </div>
-    
-
-        <p style="margin-top: 20px;">14. 区域/选择地址组件</p>
-        <div style="padding: 5px; height: 300px;">
-           <p>使用手册详见yohoblk/public/js/plugins/README.md</p>
-           <div id="address"></div>
-        </div>
-
-        <p class="title">14. tips</p>
-        <div>
-            <button id="change" >show or hide tip</button>
-        </div>
-        <div id="tips" style="width: 200px;">
-            <input style="width: 100%;" type="text" name="" id="">
-        </div>
-
-        <p class="title">15. 头像</p>
-
-        <div>
-            <img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
-        </div>
-
-
-        <p class="title">16. 对话框（弹窗）</p>
-        <span class="btn alert-btn">alert</span>
-        <span class="btn red confirm-btn">confirm</span>
-        <span class="btn white dialog-btn">dialog</span>
-
-        <p class="title">17. 分享</p>
-        {{> share}}
-
-        {{/ content}}
-    </div>
-
-</div>
+<style>
+    .demo-page {
+        padding: 10px;
+    }
+
+    .demo-page .title {
+        padding: 10px 0;
+    }
+
+    .demo-page .btn {
+        margin-bottom: 10px;
+    }
+
+
+    .demo-page .icon_lists span{
+        float: left;
+        width: 50px;
+        height: 30px;
+        text-align: center;
+        margin-top: 10px;
+    }
+
+    .demo-page .modality {
+        color: #219dd6;
+    }
+
+    .demo-page .modality span{
+        font-size: 20px;
+    }
+
+    .demo-page .sort {
+        color: #999;
+    }
+
+    .demo-page .sort span {
+        font-size: 20px;
+    }
+
+    .your-div {
+        width: 500px;
+        height: 200px;
+    }
+</style>
+<div class="demo-page blk-page">
+    {{# content}}
+        <p class="title">1.复选按钮</p>
+        {{#each checkbox}}
+            {{> icon/checkbox}}
+            <br><br>
+        {{/each}}
+
+        <p class="title">2.单选按钮</p>
+        {{#each radio}}
+            {{> icon/radio}}
+            <br><br>
+        {{/each}}
+
+        <p class="title">2.1 选中状态切换</p>
+
+
+        {{#each genders}}
+        <div class="input-radio" data-value="{{value}}">
+            {{> icon/radio}}
+            <label>{{name}}</label>
+        </div>
+        {{/each}}
+
+        {{#each genders}}
+        <div class="input-checkbox" data-value="{{value}}">
+            {{> icon/checkbox}}
+            <label>{{name}}</label>
+        </div>
+        {{/each}}
+
+        <div class="check-msg"></div>
+
+        <p class="title">3. 按钮</p>
+        <span class="btn">普通按钮</span>
+        <span class="btn disable">不可点按钮</span>
+        <span class="btn red">红色按钮</span>
+        <span class="btn white">白色按钮</span>
+
+        <p class="title">4. 提示文字或者某些链接文字颜色</p>
+        <span class="blue">提示文字</span>
+        <a class="blue">Link text</a>
+
+        <p class="title">5. input</p>
+        <input class="input" type="text">
+
+        <p class="bold title">6.文字加粗</p>
+
+        <p class="title">7. 浮动和clearfix</p>
+        <div class="clearfix" style="width: 300px;border: 1px solid #000;">
+            <p class="left">左浮动</p>
+            <p class="right">右浮动</p>
+        </div>
+
+        <p class="title">8. 显示和隐藏</p>
+        <div style="border: 1px solid #000;">
+            <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
+            <p><span class="block">我是block</span></p>
+            <p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
+            <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
+        </div>
+
+        <p class="title">9. 分页组件</p>
+        <div style="border: 1px solid #000; height: 200px; padding: 5px;">
+           {{{ pagination paginationOpts }}}
+        </div>
+
+        <p class="title">10. 商品信息</p>
+        {{# goods}}
+            {{> goods}}
+        {{/ goods}}
+
+        <p class="title">11. 面包屑</p>
+        {{# navPath}}
+            {{> path-nav}}
+        {{/ navPath}}
+
+        <p class="title">12. 楼层</p>
+        {{# floor}}
+           {{> floor}}
+        {{/ floor}}
+
+        <p class="title">13. 各类图标</p>
+        <div style="border: 1px solid #000;overflow: hidden;">
+            <ul class="icon_lists clear">
+                <div class="modality">
+                    {{> icon/truck}}
+                    {{# hook}}
+                        {{> icon/round-hook}}
+                    {{/ hook}}
+                    {{> icon/error-round}}
+                    {{> icon/doubt}}
+                    {{# warn}}
+                        {{> icon/warn}}
+                    {{/ warn}}
+                </div>
+
+                <div class="sort">
+                    {{> icon/clock}}
+                    {{> icon/praise}}
+                    {{> icon/delete}}
+                    {{> icon/up}}
+                    {{> icon/down}}
+                    {{> icon/solid-round}}
+                    {{> icon/collection}}
+                    {{> icon/bookmarks}}
+                    {{> icon/refresh}}
+                    {{> icon/headset}}
+                </div>
+            </ul>
+        </div>
+
+
+        <p style="margin-top: 20px;">14. 区域/选择地址组件</p>
+        <div style="padding: 5px; height: 300px;">
+           <p>使用手册详见yohoblk/public/js/plugins/README.md</p>
+           <div id="address"></div>
+        </div>
+
+        <p class="title">14. tips</p>
+        <div>
+            <button id="change" >show or hide tip</button>
+        </div>
+        <div id="tips" style="width: 200px;">
+            <input style="width: 100%;" type="text" name="" id="">
+        </div>
+
+        <p class="title">15. 头像</p>
+
+        <div>
+            <img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
+        </div>
+
+
+        <p class="title">16. 对话框（弹窗）</p>
+        <span class="btn alert-btn">alert</span>
+        <span class="btn red confirm-btn">confirm</span>
+        <span class="btn white dialog-btn">dialog</span>
+
+        <p class="title">17. 分享</p>
+        {{> share}}
+
+
+        <p class="title">18. 个性化滚动条</p>
+
+        <div class="your-div nano">
+            <div class="nano-content">
+                <pre>
+                // html 添加样式 .nano   .nano-content
+                &lt;div class="your-div nano">
+                    &lt;div class="nano-content">
+                        your content...
+                    &lt;/div>
+                &lt;/div>
+
+
+                // js
+
+                    require('yoho-jquery-nanoscroller');
+                    $('.nano').nanoScroller();
+                </pre>
+            </div>
+        </div>
+        {{/ content}}
+    </div>
+
+</div>

@@ -13,9 +13,12 @@ var change = $('#change');
 var show = false;
 var show = false;
 
 
 require('yoho-jquery-qrcode');
 require('yoho-jquery-qrcode');
+require('yoho-jquery-nanoscroller');
 require('../plugins/tips');
 require('../plugins/tips');
 require('../plugins/check');
 require('../plugins/check');
 
 
+$('.nano').nanoScroller();
+
 $('.alert-btn').click(function() {
 $('.alert-btn').click(function() {
     new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show();
     new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show();
 });
 });
@@ -92,7 +95,7 @@ $(function() {
     // 运行此demo
     // 运行此demo
     // 1. 安装 npm i -g json-server
     // 1. 安装 npm i -g json-server
     // 2. json-server --watch mock/address.json
     // 2. json-server --watch mock/address.json
-    cascadingAddress({
+    window.add = cascadingAddress({
         el: '#address',
         el: '#address',
         url: 'http://localhost:3000/areas/0',
         url: 'http://localhost:3000/areas/0',
         resource: 'areas'
         resource: 'areas'

@@ -34,4 +34,8 @@
             dist: '320102'  // 区县
             dist: '320102'  // 区县
         });
         });
 
 
+    重置地址:
+
+        address.reset();
+
     开发者: 董金虎
     开发者: 董金虎

@@ -439,6 +439,19 @@ CascadingAddress.prototype.setAddress = function(targetAddr) {
     }
     }
 };
 };
 
 
+// 重置地址
+CascadingAddress.prototype.reset = function() {
+    var items = $(this.config.el).find('.items-indicator'),
+        labels = this.config.indicators;
+
+    items.each(function(index, item) {
+        $(item).find('span.indicator-name').text(labels[index])
+               .next().val('')
+               .parent().next()
+               .find('span.checked').removeClass('checked').prev().hide();
+    });
+};
+
 module.exports = function(options) {
 module.exports = function(options) {
     return new CascadingAddress(options);
     return new CascadingAddress(options);
 };
 };

@@ -2,6 +2,10 @@
 
 
     font-size: 14px;
     font-size: 14px;
 
 
+    .btn {
+        cursor: pointer;
+    }
+
     .center-content {
     .center-content {
         .left {
         .left {
             width: 250px;
             width: 250px;
@@ -12,6 +16,7 @@
     }
     }
     .input-radio {
     .input-radio {
         padding: 10px 1px;
         padding: 10px 1px;
+        cursor: pointer;
 
 
         .round-color {
         .round-color {
             width: 22px;
             width: 22px;
@@ -79,6 +84,7 @@
             padding: 5px 0;
             padding: 5px 0;
             margin: 5px 11px 5px 0;
             margin: 5px 11px 5px 0;
             display: inline-block;
             display: inline-block;
+            cursor: pointer;
         }
         }
 
 
         .select {
         .select {
@@ -88,6 +94,7 @@
         .mulit-choose {
         .mulit-choose {
             border: 1px solid #1b1b1b;
             border: 1px solid #1b1b1b;
             padding: 5px 10px;
             padding: 5px 10px;
+            cursor: pointer;
         }
         }
     }
     }
     .brand-btns {
     .brand-btns {
@@ -188,6 +195,7 @@
             float: right;
             float: right;
             color: #878787;
             color: #878787;
             margin: 22px 20px 0 0;
             margin: 22px 20px 0 0;
+            cursor: pointer;
         }
         }
 
 
         .filter-item {
         .filter-item {
@@ -197,6 +205,7 @@
             border: 1px solid #adacad;
             border: 1px solid #adacad;
             background-color: #fff;
             background-color: #fff;
             padding: 8px;
             padding: 8px;
+            cursor: pointer;
 
 
             span {
             span {
                 font-size: 14px;
                 font-size: 14px;
@@ -241,6 +250,7 @@
             margin: 14px 15px;
             margin: 14px 15px;
             height: 24px;
             height: 24px;
             line-height: 24px;
             line-height: 24px;
+            cursor: pointer;
         }
         }
 
 
         .dest {
         .dest {
@@ -252,6 +262,7 @@
             margin: 14px 15px;
             margin: 14px 15px;
             margin-left: -10px;
             margin-left: -10px;
             margin-bottom: -10px;
             margin-bottom: -10px;
+            cursor: pointer;
 
 
             .iconfont {
             .iconfont {
                 display: block;
                 display: block;
@@ -304,6 +315,7 @@
                 font-size: 14px;
                 font-size: 14px;
                 text-align: center;
                 text-align: center;
                 margin-right: 8px;
                 margin-right: 8px;
+                cursor: pointer;
             }
             }
 
 
             .page.disable {
             .page.disable {
@@ -324,6 +336,7 @@
             display: inline-block;
             display: inline-block;
             text-align: center;
             text-align: center;
             border: 2px solid #fff;
             border: 2px solid #fff;
+            cursor: pointer;
 
 
             .goods-brand {
             .goods-brand {
                 font-weight: 700;
                 font-weight: 700;
@@ -390,6 +403,7 @@
 
 
                 img {
                 img {
                     margin: 8px 0;
                     margin: 8px 0;
+                    cursor: pointer;
                 }
                 }
             }
             }
         }
         }