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
<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>
\ No newline at end of file
<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;
require('yoho-jquery-qrcode');
require('yoho-jquery-nanoscroller');
require('../plugins/tips');
require('../plugins/check');
$('.nano').nanoScroller();
$('.alert-btn').click(function() {
new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show();
});
... ... @@ -92,7 +95,7 @@ $(function() {
// 运行此demo
// 1. 安装 npm i -g json-server
// 2. json-server --watch mock/address.json
cascadingAddress({
window.add = cascadingAddress({
el: '#address',
url: 'http://localhost:3000/areas/0',
resource: 'areas'
... ...
... ... @@ -34,4 +34,8 @@
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) {
return new CascadingAddress(options);
};
... ...
... ... @@ -2,6 +2,10 @@
font-size: 14px;
.btn {
cursor: pointer;
}
.center-content {
.left {
width: 250px;
... ... @@ -12,6 +16,7 @@
}
.input-radio {
padding: 10px 1px;
cursor: pointer;
.round-color {
width: 22px;
... ... @@ -79,6 +84,7 @@
padding: 5px 0;
margin: 5px 11px 5px 0;
display: inline-block;
cursor: pointer;
}
.select {
... ... @@ -88,6 +94,7 @@
.mulit-choose {
border: 1px solid #1b1b1b;
padding: 5px 10px;
cursor: pointer;
}
}
.brand-btns {
... ... @@ -188,6 +195,7 @@
float: right;
color: #878787;
margin: 22px 20px 0 0;
cursor: pointer;
}
.filter-item {
... ... @@ -197,6 +205,7 @@
border: 1px solid #adacad;
background-color: #fff;
padding: 8px;
cursor: pointer;
span {
font-size: 14px;
... ... @@ -241,6 +250,7 @@
margin: 14px 15px;
height: 24px;
line-height: 24px;
cursor: pointer;
}
.dest {
... ... @@ -252,6 +262,7 @@
margin: 14px 15px;
margin-left: -10px;
margin-bottom: -10px;
cursor: pointer;
.iconfont {
display: block;
... ... @@ -304,6 +315,7 @@
font-size: 14px;
text-align: center;
margin-right: 8px;
cursor: pointer;
}
.page.disable {
... ... @@ -324,6 +336,7 @@
display: inline-block;
text-align: center;
border: 2px solid #fff;
cursor: pointer;
.goods-brand {
font-weight: 700;
... ... @@ -390,6 +403,7 @@
img {
margin: 8px 0;
cursor: pointer;
}
}
}
... ...