fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit ced9fb240d3be457ccd891b758bb2cfe025b2ae0 2 parents 7a50709e ed5042cb

Merge branch 'develop' of http://git.yoho.cn/fe/yoho-blk into develop

Inline Side-by-side
Showing 5 changed files with 245 additions and 185 deletions
1 -<style>  
2 - .demo-page {  
3 - padding: 10px;  
4 - }  
5 -  
6 - .demo-page .title {  
7 - padding: 10px 0;  
8 - }  
9 -  
10 - .demo-page .btn {  
11 - margin-bottom: 10px;  
12 - }  
13 -  
14 -  
15 - .demo-page .icon_lists span{  
16 - float: left;  
17 - width: 50px;  
18 - height: 30px;  
19 - text-align: center;  
20 - margin-top: 10px;  
21 - }  
22 -  
23 - .demo-page .modality {  
24 - color: #219dd6;  
25 - }  
26 -  
27 - .demo-page .modality span{  
28 - font-size: 20px;  
29 - }  
30 -  
31 - .demo-page .sort {  
32 - color: #999;  
33 - }  
34 -  
35 - .demo-page .sort span {  
36 - font-size: 20px;  
37 - }  
38 -</style>  
39 -<div class="demo-page blk-page">  
40 - {{# content}}  
41 - <p class="title">1.复选按钮</p>  
42 - {{#each checkbox}}  
43 - {{> icon/checkbox}}  
44 - <br><br>  
45 - {{/each}}  
46 -  
47 - <p class="title">2.单选按钮</p>  
48 - {{#each radio}}  
49 - {{> icon/radio}}  
50 - <br><br>  
51 - {{/each}}  
52 -  
53 - <p class="title">2.1 选中状态切换</p>  
54 -  
55 -  
56 - {{#each genders}}  
57 - <div class="input-radio" data-value="{{value}}">  
58 - {{> icon/radio}}  
59 - <label>{{name}}</label>  
60 - </div>  
61 - {{/each}}  
62 -  
63 - {{#each genders}}  
64 - <div class="input-checkbox" data-value="{{value}}">  
65 - {{> icon/checkbox}}  
66 - <label>{{name}}</label>  
67 - </div>  
68 - {{/each}}  
69 -  
70 - <div class="check-msg"></div>  
71 -  
72 - <p class="title">3. 按钮</p>  
73 - <span class="btn">普通按钮</span>  
74 - <span class="btn disable">不可点按钮</span>  
75 - <span class="btn red">红色按钮</span>  
76 - <span class="btn white">白色按钮</span>  
77 -  
78 - <p class="title">4. 提示文字或者某些链接文字颜色</p>  
79 - <span class="blue">提示文字</span>  
80 - <a class="blue">Link text</a>  
81 -  
82 - <p class="title">5. input</p>  
83 - <input class="input" type="text">  
84 -  
85 - <p class="bold title">6.文字加粗</p>  
86 -  
87 - <p class="title">7. 浮动和clearfix</p>  
88 - <div class="clearfix" style="width: 300px;border: 1px solid #000;">  
89 - <p class="left">左浮动</p>  
90 - <p class="right">右浮动</p>  
91 - </div>  
92 -  
93 - <p class="title">8. 显示和隐藏</p>  
94 - <div style="border: 1px solid #000;">  
95 - <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>  
96 - <p><span class="block">我是block</span></p>  
97 - <p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>  
98 - <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>  
99 - </div>  
100 -  
101 - <p class="title">9. 分页组件</p>  
102 - <div style="border: 1px solid #000; height: 200px; padding: 5px;">  
103 - {{{ pagination paginationOpts }}}  
104 - </div>  
105 -  
106 - <p class="title">10. 商品信息</p>  
107 - {{# goods}}  
108 - {{> goods}}  
109 - {{/ goods}}  
110 -  
111 - <p class="title">11. 面包屑</p>  
112 - {{# navPath}}  
113 - {{> path-nav}}  
114 - {{/ navPath}}  
115 -  
116 - <p class="title">12. 楼层</p>  
117 - {{# floor}}  
118 - {{> floor}}  
119 - {{/ floor}}  
120 -  
121 - <p class="title">13. 各类图标</p>  
122 - <div style="border: 1px solid #000;overflow: hidden;">  
123 - <ul class="icon_lists clear">  
124 - <div class="modality">  
125 - {{> icon/truck}}  
126 - {{# hook}}  
127 - {{> icon/round-hook}}  
128 - {{/ hook}}  
129 - {{> icon/error-round}}  
130 - {{> icon/doubt}}  
131 - {{# warn}}  
132 - {{> icon/warn}}  
133 - {{/ warn}}  
134 - </div>  
135 -  
136 - <div class="sort">  
137 - {{> icon/clock}}  
138 - {{> icon/praise}}  
139 - {{> icon/delete}}  
140 - {{> icon/up}}  
141 - {{> icon/down}}  
142 - {{> icon/solid-round}}  
143 - {{> icon/collection}}  
144 - {{> icon/bookmarks}}  
145 - {{> icon/refresh}}  
146 - {{> icon/headset}}  
147 - </div>  
148 - </ul>  
149 - </div>  
150 -  
151 -  
152 - <p style="margin-top: 20px;">14. 区域/选择地址组件</p>  
153 - <div style="padding: 5px; height: 300px;">  
154 - <p>使用手册详见yohoblk/public/js/plugins/README.md</p>  
155 - <div id="address"></div>  
156 - </div>  
157 -  
158 - <p class="title">14. tips</p>  
159 - <div>  
160 - <button id="change" >show or hide tip</button>  
161 - </div>  
162 - <div id="tips" style="width: 200px;">  
163 - <input style="width: 100%;" type="text" name="" id="">  
164 - </div>  
165 -  
166 - <p class="title">15. 头像</p>  
167 -  
168 - <div>  
169 - <img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">  
170 - </div>  
171 -  
172 -  
173 - <p class="title">16. 对话框（弹窗）</p>  
174 - <span class="btn alert-btn">alert</span>  
175 - <span class="btn red confirm-btn">confirm</span>  
176 - <span class="btn white dialog-btn">dialog</span>  
177 -  
178 - <p class="title">17. 分享</p>  
179 - {{> share}}  
180 -  
181 - {{/ content}}  
182 - </div>  
183 -  
184 -</div>  
  1 +<style>
  2 + .demo-page {
  3 + padding: 10px;
  4 + }
  5 +
  6 + .demo-page .title {
  7 + padding: 10px 0;
  8 + }
  9 +
  10 + .demo-page .btn {
  11 + margin-bottom: 10px;
  12 + }
  13 +
  14 +
  15 + .demo-page .icon_lists span{
  16 + float: left;
  17 + width: 50px;
  18 + height: 30px;
  19 + text-align: center;
  20 + margin-top: 10px;
  21 + }
  22 +
  23 + .demo-page .modality {
  24 + color: #219dd6;
  25 + }
  26 +
  27 + .demo-page .modality span{
  28 + font-size: 20px;
  29 + }
  30 +
  31 + .demo-page .sort {
  32 + color: #999;
  33 + }
  34 +
  35 + .demo-page .sort span {
  36 + font-size: 20px;
  37 + }
  38 +
  39 + .your-div {
  40 + width: 500px;
  41 + height: 200px;
  42 + }
  43 +</style>
  44 +<div class="demo-page blk-page">
  45 + {{# content}}
  46 + <p class="title">1.复选按钮</p>
  47 + {{#each checkbox}}
  48 + {{> icon/checkbox}}
  49 + <br><br>
  50 + {{/each}}
  51 +
  52 + <p class="title">2.单选按钮</p>
  53 + {{#each radio}}
  54 + {{> icon/radio}}
  55 + <br><br>
  56 + {{/each}}
  57 +
  58 + <p class="title">2.1 选中状态切换</p>
  59 +
  60 +
  61 + {{#each genders}}
  62 + <div class="input-radio" data-value="{{value}}">
  63 + {{> icon/radio}}
  64 + <label>{{name}}</label>
  65 + </div>
  66 + {{/each}}
  67 +
  68 + {{#each genders}}
  69 + <div class="input-checkbox" data-value="{{value}}">
  70 + {{> icon/checkbox}}
  71 + <label>{{name}}</label>
  72 + </div>
  73 + {{/each}}
  74 +
  75 + <div class="check-msg"></div>
  76 +
  77 + <p class="title">3. 按钮</p>
  78 + <span class="btn">普通按钮</span>
  79 + <span class="btn disable">不可点按钮</span>
  80 + <span class="btn red">红色按钮</span>
  81 + <span class="btn white">白色按钮</span>
  82 +
  83 + <p class="title">4. 提示文字或者某些链接文字颜色</p>
  84 + <span class="blue">提示文字</span>
  85 + <a class="blue">Link text</a>
  86 +
  87 + <p class="title">5. input</p>
  88 + <input class="input" type="text">
  89 +
  90 + <p class="bold title">6.文字加粗</p>
  91 +
  92 + <p class="title">7. 浮动和clearfix</p>
  93 + <div class="clearfix" style="width: 300px;border: 1px solid #000;">
  94 + <p class="left">左浮动</p>
  95 + <p class="right">右浮动</p>
  96 + </div>
  97 +
  98 + <p class="title">8. 显示和隐藏</p>
  99 + <div style="border: 1px solid #000;">
  100 + <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
  101 + <p><span class="block">我是block</span></p>
  102 + <p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
  103 + <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
  104 + </div>
  105 +
  106 + <p class="title">9. 分页组件</p>
  107 + <div style="border: 1px solid #000; height: 200px; padding: 5px;">
  108 + {{{ pagination paginationOpts }}}
  109 + </div>
  110 +
  111 + <p class="title">10. 商品信息</p>
  112 + {{# goods}}
  113 + {{> goods}}
  114 + {{/ goods}}
  115 +
  116 + <p class="title">11. 面包屑</p>
  117 + {{# navPath}}
  118 + {{> path-nav}}
  119 + {{/ navPath}}
  120 +
  121 + <p class="title">12. 楼层</p>
  122 + {{# floor}}
  123 + {{> floor}}
  124 + {{/ floor}}
  125 +
  126 + <p class="title">13. 各类图标</p>
  127 + <div style="border: 1px solid #000;overflow: hidden;">
  128 + <ul class="icon_lists clear">
  129 + <div class="modality">
  130 + {{> icon/truck}}
  131 + {{# hook}}
  132 + {{> icon/round-hook}}
  133 + {{/ hook}}
  134 + {{> icon/error-round}}
  135 + {{> icon/doubt}}
  136 + {{# warn}}
  137 + {{> icon/warn}}
  138 + {{/ warn}}
  139 + </div>
  140 +
  141 + <div class="sort">
  142 + {{> icon/clock}}
  143 + {{> icon/praise}}
  144 + {{> icon/delete}}
  145 + {{> icon/up}}
  146 + {{> icon/down}}
  147 + {{> icon/solid-round}}
  148 + {{> icon/collection}}
  149 + {{> icon/bookmarks}}
  150 + {{> icon/refresh}}
  151 + {{> icon/headset}}
  152 + </div>
  153 + </ul>
  154 + </div>
  155 +
  156 +
  157 + <p style="margin-top: 20px;">14. 区域/选择地址组件</p>
  158 + <div style="padding: 5px; height: 300px;">
  159 + <p>使用手册详见yohoblk/public/js/plugins/README.md</p>
  160 + <div id="address"></div>
  161 + </div>
  162 +
  163 + <p class="title">14. tips</p>
  164 + <div>
  165 + <button id="change" >show or hide tip</button>
  166 + </div>
  167 + <div id="tips" style="width: 200px;">
  168 + <input style="width: 100%;" type="text" name="" id="">
  169 + </div>
  170 +
  171 + <p class="title">15. 头像</p>
  172 +
  173 + <div>
  174 + <img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
  175 + </div>
  176 +
  177 +
  178 + <p class="title">16. 对话框（弹窗）</p>
  179 + <span class="btn alert-btn">alert</span>
  180 + <span class="btn red confirm-btn">confirm</span>
  181 + <span class="btn white dialog-btn">dialog</span>
  182 +
  183 + <p class="title">17. 分享</p>
  184 + {{> share}}
  185 +
  186 +
  187 + <p class="title">18. 个性化滚动条</p>
  188 +
  189 + <div class="your-div nano">
  190 + <div class="nano-content">
  191 + <pre>
  192 + // html 添加样式 .nano .nano-content
  193 + &lt;div class="your-div nano">
  194 + &lt;div class="nano-content">
  195 + your content...
  196 + &lt;/div>
  197 + &lt;/div>
  198 +
  199 +
  200 + // js
  201 +
  202 + require('yoho-jquery-nanoscroller');
  203 + $('.nano').nanoScroller();
  204 + </pre>
  205 + </div>
  206 + </div>
  207 + {{/ content}}
  208 + </div>
  209 +
  210 +</div>
@@ -13,9 +13,12 @@ var change = $('#change'); @@ -13,9 +13,12 @@ var change = $('#change');
13 var show = false; 13 var show = false;
14 14
15 require('yoho-jquery-qrcode'); 15 require('yoho-jquery-qrcode');
  16 +require('yoho-jquery-nanoscroller');
16 require('../plugins/tips'); 17 require('../plugins/tips');
17 require('../plugins/check'); 18 require('../plugins/check');
18 19
  20 +$('.nano').nanoScroller();
  21 +
19 $('.alert-btn').click(function() { 22 $('.alert-btn').click(function() {
20 new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show(); 23 new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show();
21 }); 24 });
@@ -92,7 +95,7 @@ $(function() { @@ -92,7 +95,7 @@ $(function() {
92 // 运行此demo 95 // 运行此demo
93 // 1. 安装 npm i -g json-server 96 // 1. 安装 npm i -g json-server
94 // 2. json-server --watch mock/address.json 97 // 2. json-server --watch mock/address.json
95 - cascadingAddress({ 98 + window.add = cascadingAddress({
96 el: '#address', 99 el: '#address',
97 url: 'http://localhost:3000/areas/0', 100 url: 'http://localhost:3000/areas/0',
98 resource: 'areas' 101 resource: 'areas'
@@ -34,4 +34,8 @@ @@ -34,4 +34,8 @@
34 dist: '320102' // 区县 34 dist: '320102' // 区县
35 }); 35 });
36 36
  37 + 重置地址:
  38 +
  39 + address.reset();
  40 +
37 开发者: 董金虎 41 开发者: 董金虎
@@ -439,6 +439,19 @@ CascadingAddress.prototype.setAddress = function(targetAddr) { @@ -439,6 +439,19 @@ CascadingAddress.prototype.setAddress = function(targetAddr) {
439 } 439 }
440 }; 440 };
441 441
  442 +// 重置地址
  443 +CascadingAddress.prototype.reset = function() {
  444 + var items = $(this.config.el).find('.items-indicator'),
  445 + labels = this.config.indicators;
  446 +
  447 + items.each(function(index, item) {
  448 + $(item).find('span.indicator-name').text(labels[index])
  449 + .next().val('')
  450 + .parent().next()
  451 + .find('span.checked').removeClass('checked').prev().hide();
  452 + });
  453 +};
  454 +
442 module.exports = function(options) { 455 module.exports = function(options) {
443 return new CascadingAddress(options); 456 return new CascadingAddress(options);
444 }; 457 };
@@ -2,6 +2,10 @@ @@ -2,6 +2,10 @@
2 2
3 font-size: 14px; 3 font-size: 14px;
4 4
  5 + .btn {
  6 + cursor: pointer;
  7 + }
  8 +
5 .center-content { 9 .center-content {
6 .left { 10 .left {
7 width: 250px; 11 width: 250px;
@@ -12,6 +16,7 @@ @@ -12,6 +16,7 @@
12 } 16 }
13 .input-radio { 17 .input-radio {
14 padding: 10px 1px; 18 padding: 10px 1px;
  19 + cursor: pointer;
15 20
16 .round-color { 21 .round-color {
17 width: 22px; 22 width: 22px;
@@ -79,6 +84,7 @@ @@ -79,6 +84,7 @@
79 padding: 5px 0; 84 padding: 5px 0;
80 margin: 5px 11px 5px 0; 85 margin: 5px 11px 5px 0;
81 display: inline-block; 86 display: inline-block;
  87 + cursor: pointer;
82 } 88 }
83 89
84 .select { 90 .select {
@@ -88,6 +94,7 @@ @@ -88,6 +94,7 @@
88 .mulit-choose { 94 .mulit-choose {
89 border: 1px solid #1b1b1b; 95 border: 1px solid #1b1b1b;
90 padding: 5px 10px; 96 padding: 5px 10px;
  97 + cursor: pointer;
91 } 98 }
92 } 99 }
93 .brand-btns { 100 .brand-btns {
@@ -188,6 +195,7 @@ @@ -188,6 +195,7 @@
188 float: right; 195 float: right;
189 color: #878787; 196 color: #878787;
190 margin: 22px 20px 0 0; 197 margin: 22px 20px 0 0;
  198 + cursor: pointer;
191 } 199 }
192 200
193 .filter-item { 201 .filter-item {
@@ -197,6 +205,7 @@ @@ -197,6 +205,7 @@
197 border: 1px solid #adacad; 205 border: 1px solid #adacad;
198 background-color: #fff; 206 background-color: #fff;
199 padding: 8px; 207 padding: 8px;
  208 + cursor: pointer;
200 209
201 span { 210 span {
202 font-size: 14px; 211 font-size: 14px;
@@ -241,6 +250,7 @@ @@ -241,6 +250,7 @@
241 margin: 14px 15px; 250 margin: 14px 15px;
242 height: 24px; 251 height: 24px;
243 line-height: 24px; 252 line-height: 24px;
  253 + cursor: pointer;
244 } 254 }
245 255
246 .dest { 256 .dest {
@@ -252,6 +262,7 @@ @@ -252,6 +262,7 @@
252 margin: 14px 15px; 262 margin: 14px 15px;
253 margin-left: -10px; 263 margin-left: -10px;
254 margin-bottom: -10px; 264 margin-bottom: -10px;
  265 + cursor: pointer;
255 266
256 .iconfont { 267 .iconfont {
257 display: block; 268 display: block;
@@ -304,6 +315,7 @@ @@ -304,6 +315,7 @@
304 font-size: 14px; 315 font-size: 14px;
305 text-align: center; 316 text-align: center;
306 margin-right: 8px; 317 margin-right: 8px;
  318 + cursor: pointer;
307 } 319 }
308 320
309 .page.disable { 321 .page.disable {
@@ -324,6 +336,7 @@ @@ -324,6 +336,7 @@
324 display: inline-block; 336 display: inline-block;
325 text-align: center; 337 text-align: center;
326 border: 2px solid #fff; 338 border: 2px solid #fff;
  339 + cursor: pointer;
327 340
328 .goods-brand { 341 .goods-brand {
329 font-weight: 700; 342 font-weight: 700;
@@ -390,6 +403,7 @@ @@ -390,6 +403,7 @@
390 403
391 img { 404 img {
392 margin: 8px 0; 405 margin: 8px 0;
  406 + cursor: pointer;
393 } 407 }
394 } 408 }
395 } 409 }