Skip to content

A
amazeui

Miykael_xxm / amazeui

通知 1
Star 0
Fork 0
A
amazeui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 a21e57d3 编写于 作者: Hzp_D's avatar Hzp_D
浏览文件
操作

Merge branch 'master' into branch hzp

上级 295ed040 db288cf6
展开全部 隐藏空白更改
内联 并排
Showing with 2582 addition and 1749 deletion
.gitignore
浏览文件 @ a21e57d3
......@@ -25,6 +25,6 @@ node_modules/
/dist/docs/*
/app/public/*
#/dist/amui*
#/dist/assets/
dist/assets
.build
tools/app/public/style.css
\ No newline at end of file
CHANGELOG.md
浏览文件 @ a21e57d3
# Amaze UI Change Log
---
## 2014.08 W4
__Navbar 组件__：
- `IMPROVED` 重写交互；
- `IMPROVED` 使用 Amaze UI Share 插件，移除百度分享；
- `CHANGED` 删除图标位置选项，只提供图标在上方的样式；
- `IMPROVED` 主题细节调整。
__JS Tabs 插件__：
- `NEW` 新增 Tabs 插件，使用 CSS3 实现平滑滚动及回弹效果。
__Tabs 组件__：
- `IMPROVED` 使用新提取的 `Tabs` 插件，解决高度自适应问题；
- `CHANGED` 调整数据接口，删除标签宽度选项；
- `IMPROVED` 调整主题。
__Paragraph 组件__：
- `IMPROVED` 使用 `iScroll-lite.js` 提高组件中 `table` 拖拽的体验。
__布局示例__：
- 调整路径，下载包中 Amaze UI 相关的资源使用本地文件。
## 2014.08 W3
### 官网
......
dist/assets/css/amui.all.css
浏览文件 @ a21e57d3
此差异已折叠。
dist/assets/css/amui.all.min.css
浏览文件 @ a21e57d3
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
dist/assets/js/amui.js
浏览文件 @ a21e57d3
此差异已折叠。
dist/assets/js/amui.min.js
浏览文件 @ a21e57d3
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
dist/assets/js/amui.widget.helper.js 已删除 100755 → 0
浏览文件 @ 295ed040
此差异已折叠。
dist/assets/js/amui.widget.helper.min.js 已删除 100755 → 0
浏览文件 @ 295ed040
此差异已折叠。
docs/javascript/share.md 0 → 100644
浏览文件 @ a21e57d3
# Share
---
分享插件。
<button class="am-btn am-btn-primary" data-am-toggle="share">分享到 <i class="am-icon-share-alt"></i></button>
docs/javascript/tabs.md 0 → 100644
浏览文件 @ a21e57d3
# Tabs
---
选项卡插件，基于 CSS3 `transition` 实现水平平滑滚动；CSS3 动画实现回弹效果（触控操作时）。
## 使用演示
### 等高内容
`````html
<div class="am-tabs" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="javascript: void(0)">流浪</a></li>
<li><a href="javascript: void(0)">流浪</a></li>
<li><a href="javascript: void(0)">再流浪</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-active">
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
</div>
<div class="am-tab-panel">
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
</div>
<div class="am-tab-panel">
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
</div>
</div>
</div>
`````
```html
<div class="am-tabs" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="javascript: void(0)">流浪</a></li>
<li><a href="javascript: void(0)">流浪</a></li>
<li><a href="javascript: void(0)">再流浪</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-active">
...
</div>
<div class="am-tab-panel">
...
</div>
<div class="am-tab-panel">
...
</div>
</div>
</div>
```
### 高度适应
`````html
<div class="am-tabs" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="#tab1">恣意</a></li>
<li><a href="#tab2">等候</a></li>
<li><a href="#tab3">流浪</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-fade am-in am-active" id="tab1">
置身人群中<br>你只需要被淹没 享受 沉默<br>退到人群后<br>你只需给予双手 微笑 等候
</div>
<div class="am-tab-panel am-fade" id="tab2">
走在忠孝东路<br>徘徊在茫然中<br>在我的人生旅途<br>选择了多少错误<br>我在睡梦中惊醒<br>感叹悔言无尽<br>恨我不能说服自己<br>接受一切教训<br>让生命去等候<br>等候下一个漂流<br>让生命去等候<br>等候下一个伤口
</div>
<div class="am-tab-panel am-fade" id="tab3">
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
</div>
</div>
</div>
`````
```html
<div class="am-tabs" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="#tab1">恣意</a></li>
<li><a href="#tab2">等候</a></li>
<li><a href="#tab3">流浪</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-fade am-in am-active" id="tab1">
置身人群中<br>你只需要被淹没 享受 沉默<br>退到人群后<br>你只需给予双手 微笑 等候
</div>
<div class="am-tab-panel am-fade" id="tab2">
走在忠孝东路<br>徘徊在茫然中<br>在我的人生旅途<br>选择了多少错误<br>我在睡梦中惊醒<br>感叹悔言无尽<br>恨我不能说服自己<br>接受一切教训<br>让生命去等候<br>等候下一个漂流<br>让生命去等候<br>等候下一个伤口
</div>
<div class="am-tab-panel am-fade" id="tab3">
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
</div>
</div>
</div>
```
## 调用方式
### 通过 Data API
在选项卡容器 `.am-tabs` 上添加 `data-am-tabs` 属性。上面的演示即通过此种方式调用。
```html
<div class="am-tabs" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="#tab1">恣意</a></li>
<li><a href="#tab2">等候</a></li>
<li><a href="#tab3">流浪</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-active" id="tab1">...</div>
<div class="am-tab-panel" id="tab2">...</div>
<div class="am-tab-panel" id="tab3">...</div>
</div>
</div>
```
### 通过 JS
#### 方法
通过 `$().tabs()` 开启选项卡的交互功能。
`````html
<div class="am-tabs" id="doc-my-tabs">
<ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
<li class="am-active"><a href="">彩虹</a></li>
<li><a href="">画面</a></li>
<li><a href="">窗外</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-active">外面是个下雨天，不由得就会想念</div>
<div class="am-tab-panel">像重复的广告片，总是闪烁的画面，那么地熟悉</div>
<div class="am-tab-panel">像窗外的雨，绿油油的树叶，自由地在说笑</div>
</div>
</div>
<script>
$(function() {
var $myTabs = $('#doc-my-tabs');
$myTabs.tabs();
$myTabs.find('a').on('opened:tabs:amui', function(e) {
console.log('[%s] 选项卡打开了', $(this).text());
})
})
</script>
`````
```html
<div class="am-tabs" id="doc-my-tabs">
<ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
<li class="am-active"><a href="">彩虹</a></li>
<li><a href="">画面</a></li>
<li><a href="">窗外</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-active">...</div>
<div class="am-tab-panel">...</div>
<div class="am-tab-panel">...</div>
</div>
</div>
<script>
$(function() {
$('#doc-my-tabs').tabs();
})
</script>
```
#### 自定义事件
自定义事件触发在标签上。
<table class="am-table am-table-bd am-table-striped">
<thead>
<tr>
<th>事件名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>open:tabs:amui</code></td>
<td>打开一个选项卡时立即触发</td>
</tr>
<tr>
<td><code>opened:tabs:amui</code></td>
<td>选项卡打开完成时触发（CSS 动画执行完成）</td>
</tr>
</tbody>
</table>
```javascript
$('#doc-my-tabs').find('a').on('opened:tabs:amui', function(e) {
console.log('[%s] 选项卡打开了', $(this).text());
})
```
打开控制台操作[上面的选项卡](#doc-my-tabs)查看事件监听输出的文字。
## TODO
- Ajax 载入选项卡内容支持
\ No newline at end of file
js/core.js
浏览文件 @ a21e57d3
......@@ -156,7 +156,7 @@ define(function(require, exports, module) {
};
UI.utils.generateGUID = function(namespace) {
var uid = namespace || 'am-';
var uid = namespace + '-' || 'am-';
do {
uid += Math.random().toString(36).substring(2, 7);
......
js/ui.modal.js
浏览文件 @ a21e57d3
......@@ -94,7 +94,7 @@ define(function(require, exports, module) {
this.transitioning = 1;
var complete = function() {
$element.trigger('closed.amui.modal');
$element.trigger('closed:amui:modal');
isPopup && $element.removeClass('am-modal-out');
$element.hide();
this.transitioning = 0;
......
js/ui.share.js 0 → 100644
浏览文件 @ a21e57d3
define(function(require, exports, module) {
require('core');
require('ui.modal');
var QRCode = require('util.qrcode');
var $ = window.Zepto,
UI = $.AMUI,
doc = document,
$doc = $(doc),
transition = UI.support.transition;
/**
* https://github.com/cho45/micro-template.js
* (c) cho45 http://cho45.github.com/mit-license
*/
function template(id, data) {
var me = arguments.callee;
if (!me.cache[id]) me.cache[id] = (function() {
var name = id, string = /^[\w\-]+$/.test(id) ? me.get(id) : (name = 'template(string)', id); // no warnings
var line = 1, body = (
"try { " +
(me.variable ? "var " + me.variable + " = this.stash;" : "with (this.stash) { ") +
"this.ret += '" +
string.
replace(/<%/g, '\x11').replace(/%>/g, '\x13'). // if you want other tag, just edit this line
replace(/'(?![^\x11\x13]+?\x13)/g, '\\x27').
replace(/^\s*|\s*$/g, '').
replace(/\n/g, function() {
return "';\nthis.line = " + (++line) + "; this.ret += '\\n"
}).
replace(/\x11=raw(.+?)\x13/g, "' + ($1) + '").
replace(/\x11=(.+?)\x13/g, "' + this.escapeHTML($1) + '").
replace(/\x11(.+?)\x13/g, "'; $1; this.ret += '") +
"'; " + (me.variable ? "" : "}") + "return this.ret;" +
"} catch (e) { throw 'TemplateError: ' + e + ' (on " + name + "' + ' line ' + this.line + ')'; } " +
"//@ sourceURL=" + name + "\n" // source map
).replace(/this\.ret \+= '';/g, '');
var func = new Function(body);
var map = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '\x22': '&#x22;', '\x27': '&#x27;'};
var escapeHTML = function(string) {
return ('' + string).replace(/[&<>\'\"]/g, function(_) {
return map[_]
})
};
return function(stash) {
return func.call(me.context = {escapeHTML: escapeHTML, line: 1, ret: '', stash: stash})
};
})();
return data ? me.cache[id](data) : me.cache[id];
}
template.cache = {};
template.get = function(id) {
return Share.DEFAULTS.tpl;
};
var Share = function(options) {
this.options = $.extend({}, Share.DEFAULTS, options || {});
this.$element = null;
this.$wechatQr = null;
this.pics = null;
this.init();
};
Share.DEFAULTS = {
sns: ['weibo', 'qq', 'qzone', 'tqq', 'wechat', 'renren'],
title: '分享到',
cancel: '取消',
closeOnShare: true,
id: UI.utils.generateGUID('am-share'),
desc: 'Hi，孤夜观天象，发现一个不错的西西，分享一下下 ;-)',
via: 'Amaze UI',
tpl: '<div class="am-share am-modal-actions" id="<%= id %>">' +
'<h3 class="am-share-title"><%= title %></h3>' +
'<ul class="am-share-sns sm-block-grid-3"><% for(var i = 0; i < sns.length; i++) {%>' +
'<li><a href="<%= sns[i].shareUrl %>" data-am-share-to="<%= sns[i].id %>" ><i class="am-icon-<%= sns[i].icon %>"></i><span><%= sns[i].title %></span></a></li>' +
'<% } %></ul>' +
'<div class="am-share-footer"><button class="am-btn am-btn-default am-btn-block" data-am-share-close><%= cancel %></button></div>' +
'</div>'
};
Share.SNS = {
weibo: {
title: '新浪微博',
url: 'http://service.weibo.com/share/share.php',
width: 620,
height: 450,
icon: 'weibo'
},
// url 链接地址
// title:”, 分享的文字内容(可选，默认为所在页面的title)
// appkey:”, 您申请的应用appkey,显示分享来源(可选)
// pic:”, 分享图片的路径(可选)
// ralateUid:”, 关联用户的UID，分享微博会@该用户(可选)
// NOTE: 会自动抓取图片，不用指定 pic
qq: {
title: 'QQ 好友',
url: 'http://connect.qq.com/widget/shareqq/index.html',
icon: 'qq'
},
// url:,
// title:'', 分享标题(可选)
// pics:'', 分享图片的路径(可选)
// summary:'', 分享摘要(可选)
// site:'', 分享来源 如：腾讯网(可选)
// desc: '' 发送给用户的消息
// NOTE: 经过测试，最终发给用户的只有 url 和 desc
qzone: {
title: 'QQ 空间',
url: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey',
icon: 'star'
},
// http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=xxx&title=xxx&desc=&summary=&site=
// url:,
// title:'', 分享标题(可选)
// desc:'', 默认分享理由(可选)
// summary:'', 分享摘要(可选)
// site:'', 分享来源 如：腾讯网(可选)
// pics:'', 分享图片的路径(可选)，不会自动抓取，多个图片用|分隔
tqq: {
title: '腾讯微博',
url: 'http://v.t.qq.com/share/share.php',
icon: 'tencent-weibo'
},
// url=xx&title=&appkey=801cf76d3cfc44ada52ec13114e84a96
// url
// title
// pic 多个图片用 | 分隔
// appkey
// NOTE: 不会自动抓取图片
wechat: {
title: '微信',
url: '[qrcode]',
icon: 'wechat'
},
// 生成一个二维码 供用户扫描
// 相关接口 https://github.com/zxlie/WeixinApi
renren: {
title: '人人网',
url: 'http://widget.renren.com/dialog/share',
icon: 'renren'
},
// http://widget.renren.com/dialog/share?resourceUrl=www&srcUrl=www&title=ww&description=xxx
// 550 * 400
// resourceUrl : '', // 分享的资源Url
// srcUrl : '', // 分享的资源来源Url,默认为header中的Referer,如果分享失败可以调整此值为resourceUrl试试
// pic : '', // 分享的主题图片，会自动抓取
// title : '', // 分享的标题
// description : '' // 分享的详细描述
// NOTE: 经过测试，直接使用 url 参数即可
douban: {
title: '豆瓣',
url: 'http://www.douban.com/recommend/',
icon: 'share-alt'
},
// http://www.douban.com/service/sharebutton
// 450 * 330
// http://www.douban.com/share/service?bm=1&image=&href=xxx&updated=&name=
// href 链接
// name 标题
/* void (function() {
var d = document, e = encodeURIComponent, s1 = window.getSelection, s2 = d.getSelection, s3 = d.selection, s = s1 ? s1()
: s2 ? s2() : s3 ? s3.createRange().text : '', r = 'http://www.douban.com/recommend/?url=&title=&sel=&v=1&r=1'
})();
*/
// tsohu: '',
// http://t.sohu.com/third/post.jsp?url=&title=&content=utf-8&pic=
//print: '',
mail: {
title: '邮件分享',
url: 'mailto:',
icon: 'envelope-o'
},
sms: {
title: '短信分享',
url: 'sms:',
icon: 'comment'
}
};
Share.prototype.render = function() {
var options = this.options,
snsData = [],
title = encodeURIComponent(doc.title),
link = encodeURIComponent(doc.location),
msgBody = '?body=' + title + link;
options.sns.forEach(function(item, i) {
if (Share.SNS[item]) {
var tmp = Share.SNS[item],
shareUrl;
tmp.id = item;
if (item === 'mail') {
shareUrl = msgBody + '&subject=' + options.desc;
} else if (item === 'sms') {
shareUrl = msgBody;
} else {
shareUrl = '?url=' + link + '&title=' + title;
}
tmp.shareUrl = tmp.url + shareUrl;
snsData.push(tmp);
}
});
return template('share', $.extend({}, options, {sns: snsData}));
};
Share.prototype.init = function() {
var me = this,
shareItem = '[data-am-share-to]';
$doc.ready($.proxy(function() {
$('body').append(this.render()); // append share DOM to body
this.$element = $('#' + this.options.id);
this.$element.find('[data-am-share-close]').on('click.share.amui', function() {
me.close();
});
}, this));
$doc.on('click.share.amui', shareItem, $.proxy(function(e) {
var $clicked = $(e.target),
$target = $clicked.is(shareItem) && $clicked || $clicked.parent(shareItem),
sns = $target.attr('data-am-share-to');
if (!(sns === 'mail' || sns === 'sms')) {
e.preventDefault();
this.shareTo(sns, this.setData(sns));
}
this.close();
}, this));
};
Share.prototype.open = function() {
this.$element && this.$element.modal('open');
this.$element.trigger('open:share:amui');
};
Share.prototype.close = function() {
this.$element && this.$element.modal('close');
this.$element.trigger('close:share:amui');
};
Share.prototype.toggle = function() {
this.$element.is('.am-modal-active') ? this.close() : this.open();
};
Share.prototype.setData = function(sns) {
if (!sns) return;
var shareData = {
url: doc.location,
title: doc.title
},
desc = this.options.desc,
imgSrc = this.pics || [],
qqReg = /^(qzone|qq|tqq)$/;
if (qqReg.test(sns) && !imgSrc.length) {
var allImages = doc.images;
for (var i = 0; i < allImages.length && i < 10; i++) {
!!allImages[i].src && imgSrc.push(encodeURIComponent(allImages[i].src))
}
this.pics = imgSrc; // 保存图片
}
switch (sns) {
case 'qzone':
shareData.desc = desc;
shareData.site = this.options.via;
shareData.pics = imgSrc.join('|');
// TODO: 抓取图片多张
break;
case 'qq':
shareData.desc = desc;
shareData.site = this.options.via;
shareData.pics = imgSrc[0];
// 抓取一张图片
break;
case 'tqq':
// 抓取图片多张
shareData.pic = imgSrc.join('|');
break
}
return shareData;
};
Share.prototype.shareTo = function(sns, data) {
var snsInfo = Share.SNS[sns];
if (!snsInfo) return;
if (sns === 'wechat' || sns === 'weixin') return this.wechatQr();
var query = [];
for (var key in data) {
if (data[key]) {
// 避免 encode 图片分隔符 |
query.push(key.toString() + '=' + ((key === 'pic' || key === 'pics') ? data[key] : encodeURIComponent(data[key])));
}
}
window.open(snsInfo.url + '?' + query.join('&'));
};
Share.prototype.wechatQr = function() {
if (!this.$wechatQr) {
var qrId = UI.utils.generateGUID('am-share-wechat'),
$qr = $('<div class="am-modal am-modal-no-btn am-share-wechat-qr"><div class="am-modal-dialog"><div class="am-modal-hd">分享到微信 <a href="" class="am-close am-close-spin" data-am-modal-close>&times;</a> </div><div class="am-modal-bd"><div class="am-share-wx-qr"></div><div class="am-share-wechat-tip">打开微信，点击底部的<em>发现</em>，<br/> 使用<em>扫一扫</em>将网页分享至朋友圈</div></div></div></div>', {
id: qrId
});
var qrNode = new QRCode({
render: 'canvas',
correctLevel: 0,
text: doc.location,
width: 180,
height: 180,
background: '#fff',
foreground: '#000'
});
$qr.find('.am-share-wx-qr').html(qrNode);
$qr.appendTo($('body'));
this.$wechatQr = $('#' + qrId);
}
this.$wechatQr.modal('open');
};
var share = new Share();
UI.share = share;
$doc.on('click.share.amui', '[data-am-toggle="share"]', function(e) {
e.preventDefault();
share.toggle();
});
module.exports = share;
});
// TODO: 模板函数公有化
js/ui.tabs.js 0 → 100644
浏览文件 @ a21e57d3
define(function(require, exports, module) {
'use strict';
require('core');
var $ = window.Zepto,
UI = $.AMUI,
supportTransition = UI.support.transition,
animation = UI.support.animation;
/**
* @via https://github.com/twbs/bootstrap/blob/master/js/tab.js
* @copyright 2011-2014 Twitter, Inc.
* @license MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
var Tabs = function(element) {
this.$element = $(element);
this.$tabNav = this.$element.find(Tabs.DEFAULTS.selector.nav);
this.$navs = this.$tabNav.find('a');
this.$content = this.$element.find(Tabs.DEFAULTS.selector.content);
this.$tabPanels = this.$content.find(Tabs.DEFAULTS.selector.panel);
this.transitioning = null;
this.init();
};
Tabs.DEFAULTS = {
selector: {
nav: '.am-tabs-nav',
content: '.am-tabs-bd',
panel: '.am-tab-panel'
},
status: {
active: 'am-active'
}
};
Tabs.prototype.init = function() {
this.$navs.on('click.tabs.amui', $.proxy(function(e) {
e.preventDefault();
this.open($(e.target));
}, this));
this.$content.on('swipeLeft.tabs.amui', $.proxy(function(e) {
var $nav = this.getNextNav($(e.target));
$nav && this.open($nav);
}, this));
this.$content.on('swipeRight.tabs.amui', $.proxy(function(e) {
var $nav = this.getPrevNav($(e.target));
$nav && this.open($nav);
}, this));
};
Tabs.prototype.open = function($nav) {
if (!$nav || this.transitioning || $nav.parent('li').hasClass('am-active')) return;
var $tabNav = this.$tabNav,
$navs = this.$navs,
$tabContent = this.$content,
href = $nav.attr('href'),
regexHash = /^#.+$/,
$target = regexHash.test(href) && this.$content.find(href) || this.$tabPanels.eq($navs.index($nav));
var previous = $tabNav.find('.am-active a')[0],
e = $.Event('open:tabs:amui', {
relatedTarget: previous
});
$nav.trigger(e);
if (e.isDefaultPrevented()) return;
// activate Tab nav
this.activate($nav.closest('li'), $tabNav);
// activate Tab content
this.activate($target, $tabContent, function() {
$nav.trigger({
type: 'opened:tabs:amui',
relatedTarget: previous
})
})
};
Tabs.prototype.activate = function($element, $container, callback) {
this.transitioning = true;
var $active = $container.find('> .am-active'),
transition = callback && supportTransition && !!$active.length;
$active.removeClass('am-active am-in').blur();
$element.addClass('am-active');
if (transition) {
$element.redraw(); // reflow for transition
$element.addClass('am-in');
} else {
$element.removeClass('am-fade');
}
function complete() {
callback();
this.transitioning = false;
}
transition ? $active.one(supportTransition.end, $.proxy(complete, this)) : $.proxy(complete, this);
};
Tabs.prototype.getNextNav = function($panel) {
var navIndex = this.$tabPanels.index(($panel)),
rightSpring = 'am-animation-right-spring';
if (navIndex + 1 >= this.$navs.length) { // last one
animation && $panel.addClass(rightSpring).on(animation.end, function() {
$panel.removeClass(rightSpring);
});
return null;
} else {
return this.$navs.eq(navIndex + 1);
}
};
Tabs.prototype.getPrevNav = function($panel) {
var navIndex = this.$tabPanels.index(($panel)),
leftSpring = 'am-animation-left-spring';
if (navIndex === 0) { // first one
animation && $panel.addClass(leftSpring).on(animation.end, function() {
$panel.removeClass(leftSpring);
});
return null;
} else {
return this.$navs.eq(navIndex - 1);
}
};
// Plugin
function Plugin(option) {
return this.each(function() {
var $this = $(this),
$tabs = $this.is('.am-tabs') && $this || $this.closest('.am-tabs'),
data = $tabs.data('amui.tabs');
if (!data) $tabs.data('amui.tabs', (data = new Tabs($tabs[0])));
if (typeof option == 'string' && $this.is('.am-tabs-nav a')) data[option]($this);
});
}
$.fn.tabs = Plugin;
// Init code
$(document).on('ready', function(e) {
$('[data-am-tabs]').tabs();
});
module.exports = Tabs;
});
// TODO: 1. Ajax 支持
less/amui.all.less
浏览文件 @ a21e57d3
......@@ -53,6 +53,8 @@
@import "ui.offcanvas.less";
@import "ui.popover.less";
@import "ui.progress.less";
@import "ui.tabs.less";
@import "ui.share.less";
@import "ui.component.less";
// Plugins
......
less/amui.less
浏览文件 @ a21e57d3
......@@ -53,6 +53,8 @@
@import "ui.offcanvas.less";
@import "ui.popover.less";
@import "ui.progress.less";
@import "ui.tabs.less";
@import "ui.share.less";
@import "ui.component.less";
// Plugins
......
less/animation.less
浏览文件 @ a21e57d3
......@@ -102,6 +102,13 @@
.animation(am-spin 2s infinite linear);
}
.am-animation-left-spring {
.animation(am-left-spring .3s ease-in-out);
}
.am-animation-right-spring {
.animation(am-right-spring .3s ease-in-out);
}
// Modifiers
// ========================================================================
......@@ -385,3 +392,53 @@
100% { transform: rotate(359deg); }
}
/* Spring */
@-webkit-keyframes am-right-spring {
0% {
.translate();
}
50% {
.translate(-20%)
}
100% {
.translate();
}
}
@keyframes am-right-spring {
0% {
.translate();
}
50% {
.translate(-20%)
}
100% {
.translate();
}
}
@-webkit-keyframes am-left-spring {
0% {
.translate();
}
50% {
.translate(20%);
}
100% {
.translate();
}
}
@keyframes am-left-spring {
0% {
.translate();
}
50% {
.translate(20%);
}
100% {
.translate();
}
}
\ No newline at end of file
less/mixins.less
浏览文件 @ a21e57d3
......@@ -175,7 +175,7 @@
transform: scale(@ratio);
}
.translate(@x; @y) {
.translate(@x: 0; @y: 0) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9+
transform: translate(@x, @y);
......
less/ui.dropdown.less
浏览文件 @ a21e57d3
// Name: Dropdown
// Description: Defines styles for a toggleable dropdown
// Description: Define style for dropdown
//
// Component: `am-dropdown`
//
......@@ -18,9 +18,6 @@
// `am-disabled`
//
// Uses: Animation
// Grid: `uk-width-*`
// Panel: `uk-panel`
// Nav: `uk-nav`
/** Dropdown
// ------------------------- */
......@@ -184,43 +181,3 @@ ul.am-dropdown-content {
// TODO: 1. 分隔线上下间距调整
// 2. 位置设置
// 3. 与 navbar 混合
/*// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
}*/
less/ui.share.less 0 → 100644
浏览文件 @ a21e57d3
// Name: Share
// Description: Define style for Share Plugin
//
// Component: `am-share`
//
// Sub-objects: `am-share-title`
// `am-share-sns`
// `am-share-footer`
//
// Uses: Block Grid
// Icon
// Modal
// Button
//
// ========================================================================
@share-bg: #f8f8f8;
.am-share {
font-size: 14px;
}
.am-share-title {
padding: 10px 0 0;
margin: 0 10px;
font-weight: normal;
text-align: center;
color: @gray;
background-color: @share-bg;
.border-top-radius(2px);
border-bottom: 1px solid #fff;
&:after {
content: "";
display: block;
width: 100%;
height: 1px;
margin-top: 10px;
background-color: #dfdfdf;
}
}
.am-share-sns {
margin: 0 10px;
padding-top: 15px;
background-color: @share-bg;
.border-bottom-radius(2px);
li {
margin-bottom: 15px;
}
a {
display: block;
color: @gray;
}
// SNS name
span {
display: block;
}
[class*='am-icon'] {
background-color: @global-secondary;
border-radius: 50%;
width: 36px;
height: 36px;
line-height: 36px;
color: #fff;
margin-bottom: 5px;
font-size: 18px;
}
.am-icon-weibo {
background-color: #ea1328;
}
.am-icon-qq {
background-color: #009cda;
}
.am-icon-star {
background-color: #ffc028;
}
.am-icon-tencent-weibo {
background-color: #23ccfe;
}
.am-icon-wechat,
.am-icon-weixin {
background-color: #44b549;
}
.am-icon-renren {
background-color: #105ba3;
}
.am-icon-comment {
background-color: @global-success;
}
}
.am-share-footer {
margin: 10px;
.am-btn {
color: @gray;
}
}
// wechat QRCode
.am-share-wechat-qr {
font-size: 14px;
color: #777;
.am-modal-dialog {
background-color: #fff;
border: 1px solid #dedede;
.box-shadow(0 0 5px #ddd);
}
.am-modal-hd {
padding-top: 10px;
text-align: left;
margin-bottom: 10px;
}
.am-share-wx-qr {
margin-bottom: 10px;
}
.am-share-wechat-tip {
text-align: left;
em {
color: @global-danger;
font-weight: bold;
font-style: normal;
margin-left: 3px;
margin-right: 3px;
}
}
}
less/ui.tabs.less 0 → 100644
浏览文件 @ a21e57d3
// Name: Tabs
// Description: Define style for Tabs Plugin
//
// Component: `am-tabs`
//
// Sub-objects: `am-tabs-nav`
// `am-tabs-bd`
// `am-tab-panel`
//
// States: `am-active`
//
// Uses: Nav
// Animation
//
// ========================================================================
.am-tabs {
.hook-tabs();
}
.am-tabs-bd {
position: relative;
overflow: hidden;
border: 1px solid #ddd;
border-top: none;
z-index: 1001;
.transition(height 0.3s);
.hook-tabs-bd();
.am-tab-panel {
position: absolute;
top: 0;
z-index: 999;
float: left;
width: 100%;
padding: 10px 10px 15px;
visibility: hidden;
.transition(all 0.3s);
.translate(-100%);
.hook-tab-panel();
&.am-active {
position: relative;
z-index: 1000;
visibility: visible;
.translate();
& ~ .am-tab-panel {
.translate(100%);
}
}
}
}
// HOOKS
// ========================================================================
.hook-tabs() {}
.hook-tabs-bd() {}
.hook-tab-panel() {}
vendor/amazeui.hbs.partials.js
浏览文件 @ a21e57d3
......@@ -26,7 +26,7 @@
hbs.registerPartial("menu", "{{#this}}\n <nav data-am-widget=\"menu\" class=\"am-menu {{#if theme}} am-menu-{{theme}}{{else}} am-menu-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{options.dataset}} {{#if id}}id=\"{{id}}\"{{/if}}\n {{#ifCond theme '==' 'dropdown1'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'dropdown2'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'slide1'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'offcanvas1'}} data-am-menu-offcanvas{{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}} data-am-menu-offcanvas{{/ifCond}}> {{!-- 与模板深耦合，与 JS 浅耦合 --}}\n <a href=\"javascript: void(0)\" class=\"am-menu-toggle\">\n {{#if options.toggleTitle}}\n <span class=\"am-menu-toggle-title\">{{options.toggleTitle}}</span>\n {{/if}}\n {{#if options.toggleCustomIcon}}\n <img src=\"{{options.toggleCustomIcon}}\" alt=\"Menu Toggle\"/>\n {{else}}\n {{#if options.toggleIcon}}\n <i class=\"am-menu-toggle-icon am-icon-{{options.toggleIcon}}\"></i>\n {{else}}\n <i class=\"am-menu-toggle-icon am-icon-bars\"></i>\n {{/if}}\n {{/if}}\n </a>\n\n {{!-- offCanvas menu Wrap --}}\n {{!-- 问题：方便用户，但是与主题名称（类名）耦合过深 --}}\n {{#ifCond theme '==' 'offcanvas1'}}\n <div class=\"am-offcanvas\" {{#if options.closeOffCanvasOnclick}}data-dismiss-on=\"click\"{{/if}}>\n <div class=\"am-offcanvas-bar{{#if options.offCanvasFlip}} am-offcanvas-bar-flip{{/if}}\">\n {{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}}\n <div class=\"am-offcanvas\">\n <div class=\"am-offcanvas-bar{{#if options.offCanvasFlip}} am-offcanvas-bar-flip{{/if}}\">\n {{/ifCond}}\n\n {{#if content}}\n <ul class=\"am-menu-nav {{#if options.cols}}sm-block-grid-{{options\n .cols}}{{else}}sm-block-grid-1{{/if}}{{#ifCond theme '==' 'dropdown1'}} am-collapse{{/ifCond}}{{#ifCond theme\n '==' 'dropdown2'}} am-collapse{{/ifCond}}{{#ifCond theme\n '==' 'slide1'}} am-collapse{{/ifCond}}\">\n {{#each content}}\n <li class=\"{{#if subMenu}}am-parent{{/if}}{{#if className}} {{className}}{{/if}}\">\n <a href=\"{{link}}\">{{{title}}}</a>\n {{#if subMenu}}\n <ul class=\"am-menu-sub am-collapse {{#if subCols}} sm-block-grid-{{subCols}}{{else}}\n sm-block-grid-1{{/if}} {{subMenuClassName}}\">\n {{#each subMenu}}\n <li class=\"{{#if subMenu}} am-parent{{/if}}{{#if className}} {{className}}{{/if}}\">\n <a href=\"{{link}}\">{{{title}}}</a>\n </li>\n {{/each}}\n {{!-- 显示进入栏目链接 --}}\n {{#if channelLink}}\n <li class=\"am-menu-nav-channel\"><a href=\"{{link}}\" title=\"{{title}}\">{{{channelLink}}}</a></li>\n {{/if}}\n </ul>\n {{/if}}\n </li>\n {{/each}}\n </ul>\n {{/if}}\n\n {{#ifCond theme '==' 'offcanvas1'}}\n </div>\n </div>\n {{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}}\n </div>\n </div>\n {{/ifCond}}\n {{!-- 不要问我为什么这样写，我也不想这样 --}}\n </nav>\n{{/this}}\n");
hbs.registerPartial("navbar", "{{#this}}\n <div data-am-widget=\"navbar\" class=\"am-navbar am-cf {{#if theme}}am-navbar-{{theme}}{{else}}am-navbar-default{{/if}} {{#if options.iconpos}}am-navbar-{{options.iconpos}}{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"\n id=\"{{id}}\">\n {{#if content}}\n <ul class=\"am-navbar-nav am-cf {{#if options.cols}}sm-block-grid-{{options.cols}}{{/if}}\">\n {{#each content}}\n <li class=\"am-navbar-item\" {{#if dataApi}}{{dataApi}}{{/if}}>\n <a href=\"{{#if link}}{{link}}{{/if}}\">\n {{#if customIcon}}\n <img src=\"{{customIcon}}\" alt=\"{{{title}}}\"/>\n {{else}}\n {{#if icon}}\n <span class=\"am-icon-{{icon}}\"></span>\n {{/if}}\n {{/if}}\n {{#if title}}\n {{{title}}}\n {{/if}}\n </a>\n </li>\n {{/each}}\n </ul>\n {{/if}}\n </div>\n{{/this}}\n");
hbs.registerPartial("navbar", "{{#this}}\n <div data-am-widget=\"navbar\" class=\"am-navbar am-cf {{#if theme}}am-navbar-{{theme}}{{else}}am-navbar-default{{/if}} {{#if options.iconPosition}}am-navbar-label{{options.iconPosition}}{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"\n id=\"{{id}}\">\n {{#if content}}\n <ul class=\"am-navbar-nav am-cf {{#if options.cols}}sm-block-grid-{{options.cols}}{{/if}}\">\n {{#each content}}\n <li {{#if dataApi}}{{dataApi}}{{/if}}>\n <a href=\"{{link}}\">\n {{#if customIcon}}\n <img src=\"{{customIcon}}\" alt=\"{{title}}\"/>\n {{else}}\n {{#if icon}}\n <span class=\"am-icon-{{icon}}\"></span>\n {{/if}}\n {{/if}}\n {{#if title}}\n <span class=\"am-navbar-label\">{{title}}</span>\n {{/if}}\n </a>\n </li>\n {{/each}}\n </ul>\n {{/if}}\n </div>\n{{/this}}\n");
hbs.registerPartial("pagination", "{{#this}}\n <ul data-am-widget=\"pagination\"\n class=\"am-pagination {{#if theme}}am-pagination-{{theme}}{{else}}am-pagination-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"\n {{#if id}}id=\"{{id}}\"{{/if}}>\n\n {{#if content.firstTitle}}\n <li class=\"am-pagination-first {{content.firstClassName}}\">\n <a href=\"{{content.firstLink}}\">{{{content.firstTitle}}}</a>\n </li>\n {{/if}}\n\n {{#if content.prevTitle}}\n <li class=\"am-pagination-prev {{content.prevClassName}}\">\n <a href=\"{{content.prevLink}}\">{{{content.prevTitle}}}</a>\n </li>\n {{/if}}\n\n {{! 移除 options.select，根据主题来判断结构，无奈 handlebars 逻辑处理...}}\n\n {{#if content.page}}\n\n {{#ifCond theme '==' 'select'}}\n <li class=\"am-pagination-select\">\n <select>\n {{#each content.page}}\n <option value=\"{{link}}\" class=\"{{className}}\">{{title}}{{#if ../content.total}}\n / {{../../content.total}}{{/if}}\n </option>\n {{/each}}\n </select>\n </li>\n {{else}}\n {{#ifCond theme '==' 'one'}}\n <li class=\"am-pagination-select\">\n <select>\n {{#each content.page}}\n {{content.total}}\n <option value=\"{{link}}\" class=\"{{className}}\">{{title}}{{#if ../content.total}}\n / {{../../content.total}}{{/if}}\n </option>\n {{/each}}\n </select>\n </li>\n {{else}}\n {{#each content.page}}\n <li class=\"{{className}}\">\n <a href=\"{{link}}\">{{{title}}}</a>\n </li>\n {{/each}}\n {{/ifCond}}\n {{/ifCond}}\n\n {{/if}}\n\n {{#if content.nextTitle}}\n <li class=\"am-pagination-next {{content.nextClassName}}\">\n <a href=\"{{content.nextLink}}\">{{{content.nextTitle}}}</a>\n </li>\n {{/if}}\n\n {{#if content.lastTitle}}\n <li class=\"am-pagination-last {{content.lastClassName}}\">\n <a href=\"{{content.lastLink}}\">{{{content.lastTitle}}}</a>\n </li>\n {{/if}}\n </ul>\n{{/this}}");
......@@ -36,7 +36,7 @@
hbs.registerPartial("sohucs", "{{#this}}\n <section data-am-widget=\"sohucs\" class=\"am-sohucs{{#if theme}} am-sohucs-{{theme}}{{else}} am-sohucs-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"{{#if id}} id=\"{{id}}\"{{/if}} data-am-sohucs-appid=\"{{options.appid}}\" data-am-sohucs-conf=\"{{options.conf}}\">\n <div id=\"SOHUCS\"></div>\n </section>\n{{/this}}");
hbs.registerPartial("tabs", "{{#this }}\n <div data-am-widget=\"tabs\" class=\"am-tabs{{#if theme}} am-tabs-{{theme}}{{else}} am-tabs-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{#if id}}id=\"{{id}}\"{{/if}}>\n <ul class=\"am-tabs-hd am-cf {{#if options.cols}}sm-block-grid-{{options.cols}}{{/if}}\">\n {{#each content}}\n <li class=\"{{#if class}}am-tabs-hd-active{{/if}}\">{{{header}}}</li>\n {{/each}}\n </ul>\n <div class=\"am-tabs-bd\">\n <div class=\"am-tabs-bd-content\">\n {{#each content}}\n <div class=\"{{#if class}}am-tabs-bd-active{{/if}}\">{{{substance}}}</div>\n {{/each}}\n </div>\n </div>\n </div>\n{{/this }}");
hbs.registerPartial("tabs", "{{#this }}\n <div data-am-widget=\"tabs\"\n class=\"am-tabs{{#if theme}} am-tabs-{{theme}}{{else}} am-tabs-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"\n {{#if id}}id=\"{{id}}\"{{/if}}>\n {{#if content}}\n <ul class=\"am-tabs-nav am-cf\">\n {{#each content}}\n <li class=\"{{#if active}}am-active{{/if}}\"><a href=\"[data-tab-panel-{{@index}}]\">{{{title}}}</a></li>\n {{/each}}\n </ul>\n <div class=\"am-tabs-bd\">\n {{#each content}}\n <div data-tab-panel-{{@index}} class=\"am-tab-panel {{#if active}}am-active{{/if}}\">\n {{{content}}}\n </div>\n {{/each}}\n </div>\n {{/if}}\n </div>\n{{/this }}");
hbs.registerPartial("titlebar", "{{#this}}\n<div data-am-widget=\"titlebar\" class=\"am-titlebar {{#if theme}}am-titlebar-{{theme}}{{else}}am-titlebar-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{#if id}}id=\"{{id}}\"{{/if}}>\n {{#if content.title}}\n <h2 class=\"am-titlebar-title\">\n {{#if content.link}}\n <a href=\"{{content.link}}\">{{{content.title}}}</a>\n {{else}}\n {{{content.title}}}\n {{/if}}\n </h2>\n {{/if}}\n\n {{#if content.nav}}\n <nav class=\"am-titlebar-nav\">\n {{#each content.nav}}\n <a href=\"{{link}}\" class=\"{{className}}\">{{{title}}}</a>\n {{/each}}\n </nav>\n {{/if}}\n</div>\n{{/this}}");
......
widget/navbar/HISTORY.md
浏览文件 @ a21e57d3
# Navbar 更新日志
---
## v1.2.0 (2014.08.28)
- `IMPROVED` 重写交互；
- `IMPROVED` 使用 Amaze UI Share 插件，移除百度分享；
- `CHANGED` 删除图标位置选项，只提供图标在上方的样式；
- `IMPROVED` 主题细节调整。
### 2014-03-7
* [tag:navbar] 修改数据接口 icon 修改为 icon (使用icon font) 与 customIcon(使用<img src="上传的图片">)，js目录下新增qrcode.js
* [tag:navbar] 修改数据接口 icon 修改为 icon (使用icon font) 与 customIcon(使用<img src="上传的图片">)
### 2014-02-26
......
widget/navbar/README.md
浏览文件 @ a21e57d3
......@@ -49,7 +49,6 @@ return data;
"options": {
"cols": "", //cols 值 ：列数，若数据列数较多，会自动添加一个列表
"iconpos": "" //iconpos 值 ：left top 默认为left
},
"content": [
......
widget/navbar/package.json
浏览文件 @ a21e57d3
{
"name": "navbar",
"version": "1.1.0",
"version": "1.2.0",
"localName": {
"en": "Navbar",
......@@ -34,19 +34,52 @@
"styleDependencies": [
"ui.modal.less",
"ui.component.less",
"list.less",
"button.less"
"ui.share.less"
],
"style": "navbar.less",
"demoContent": [
{
"title": "呼叫",
"link": "tel:123456789",
"icon": "phone"
},
{
"title": "分享",
"link": "###",
"icon": "share-square-o",
"dataApi": "data-am-navbar-share"
},
{
"title": "二维码",
"link": "###",
"icon": "qrcode",
"dataApi": "data-am-navbar-qrcode"
},
{
"title": "GitHub",
"link": "https://github.com/allmobilize/amazeui",
"icon": "github"
},
{
"title": "下载使用",
"link": "http://amazeui.org/getting-started",
"icon": "download"
},
{
"title": "Bug 反馈",
"link": "https://github.com/allmobilize/amazeui/issues",
"icon": "location-arrow"
}
],
"themes": [
{
"name": "default",
"desc": "默认",
"options": {
"cols": 4,
"iconpos": "top"
"cols": 4
},
"hook": "hook-am-navbar-default",
"variables": [
......@@ -56,11 +89,7 @@
"default": "#0e90d2",
"used": [
{
"selector": "",
"property": "background-color"
},
{
"selector": ".am-navbar-moreList",
"selector": ".am-navbar-nav",
"property": "background-color"
}
]
......@@ -71,56 +100,71 @@
"default": "#fff",
"used": [
{
"selector": ".am-navbar-item a",
"selector": "a",
"property": "color"
}
]
},
{
"variable": "navbar-actions-bg",
"name": "更多列表背景",
"default": "#0d86c4",
"used": [
{
"selector": ".am-navbar-actions",
"property": "background-color"
}
]
},
{
"variable": "navbar-actions-border-bottom",
"name": "更多列表下边框颜色",
"default": "#fff",
"used": [
{
"selector": ".am-navbar-actions a",
"property": "border-color"
}
]
}
],
"demos": [
{
"desc": "",
"desc": "字体图标",
"data": {
"options": {
"cols": "4"
}
}
},
{
"desc": "自定义图标",
"data": {
"options": {
"cols": "4",
"iconpos": "top"
"cols": "4"
},
"content": [
{
"title": "一键拨号",
"link": "tel:123456789",
"icon": "phone",
"dataApi": ""
"link": "sms:18601860186?body=约吗？",
"title": "消息",
"customIcon": "http://i.static.amazeui.org/assets/i/cpts/navbar/Information.png"
},
{
"title": "一键分享",
"link": "###",
"icon": "share-square-o",
"dataApi": "data-am-navbar-share"
"link": "tel:18601860186",
"title": "呼叫",
"customIcon": "http://i.static.amazeui.org/assets/i/cpts/navbar/phone.png"
},
{
"title": "二维码",
"link": "###",
"icon": "qrcode",
"dataApi": "data-am-navbar-qrcode"
},
{
"title": "关于我们",
"link": "http://yunshipei.com",
"icon": "user-md",
"dataApi": ""
},
{
"title": "下载说明",
"link": "http://yunshipei.com",
"icon": "download",
"dataApi": ""
"title": "分享",
"customIcon": "http://i.static.amazeui.org/assets/i/cpts/navbar/share.png",
"dataApi": "data-am-navbar-share"
},
{
"title": "联系我们",
"link": "http://yunshipei.com",
"icon": "location-arrow",
"dataApi": ""
"title": "地图",
"customIcon": "http://i.static.amazeui.org/assets/i/cpts/navbar/map.png"
}
]
}
......@@ -131,32 +175,53 @@
"name": "one",
"desc": "简约风格",
"options": {
"cols": 4,
"iconpos": "top"
"cols": 4
},
"hook": "hook-am-navbar-one",
"variables": [
{
"variable": "navbar-bg-color",
"variable": "navbar-bg",
"name": "背景颜色",
"default": "#15afef",
"default": "#0e90d2",
"used": [
{
"selector": "",
"selector": ".am-navbar-nav",
"property": "background-color"
}
]
},
{
"variable": "navbar-a-color",
"variable": "navbar-link-color",
"name": "链接颜色",
"default": "#fff",
"used": [
{
"selector": ".am-navbar-item a",
"selector": "a",
"property": "color"
}
]
},
{
"variable": "navbar-actions-bg",
"name": "更多列表背景",
"default": "#0d86c4",
"used": [
{
"selector": ".am-navbar-actions",
"property": "background-color"
}
]
},
{
"variable": "navbar-actions-border-bottom",
"name": "更多列表下边框颜色",
"default": "#fff",
"used": [
{
"selector": ".am-navbar-actions a",
"property": "border-color"
}
]
}
],
"demos": [
......@@ -164,41 +229,8 @@
"desc": "",
"data": {
"options": {
"cols": "4",
"iconpos": "top"
},
"content": [
{
"title": "电话",
"link": "tel:123456789",
"customIcon": "/i/navbar/phone.png",
"dataApi": ""
},
{
"title": "信息",
"link": "###",
"customIcon": "/i/navbar/Information.png",
"dataApi": ""
},
{
"title": "地图",
"link": "###",
"customIcon": "/i/navbar/map.png",
"dataApi": ""
},
{
"title": "分享",
"link": "###",
"customIcon": "/i/navbar/share.png",
"dataApi": "data-am-navbar-share"
},
{
"title": "收藏",
"link": "###",
"icon": "star",
"dataApi": ""
}
]
"cols": "4"
}
}
}
]
......@@ -212,7 +244,7 @@
"jsDependencies": [
"ui.modal.js",
"ui.dimmer.js",
"ui.share.js",
"util.qrcode.js"
],
......@@ -248,10 +280,10 @@
"options": {
"cols": {
"name": "列数",
"desc": "分栏书面（建议1-4）",
"desc": "分栏数量（建议2-4）",
"type": "select",
"required": false,
"default": 2,
"default": 4,
"dataList": [
{
"value": 1,
......@@ -271,19 +303,19 @@
}
]
},
"iconpos": {
"iconPosition": {
"name": "图标位置",
"desc": "图标默认在左，可设置在上方",
"desc": "图标默认在上方，可设置在左侧",
"type": "select",
"required": false,
"default": "",
"dataList": [
{
"value": "",
"title": "左边"
"value": "inline",
"title": "左侧"
},
{
"value": "top",
"value": "",
"title": "上方"
}
]
......@@ -325,5 +357,5 @@
"example": "/*\n 此模块的使用方法：应用amui中现成的图标数据填写在以下数据中，直接形成想要的按钮。\n \n 常用用途：显示在手机下方固定的位置，有一键拨号、二维码等功能按钮。\n \n 了解AMUI模块详情，请访问http://ide.yunshipei.com/doc/amui/#icon。\n\n 示例代码：\n \n var data = [\n {\n \"title\": \"拨号\", \n \n \"link\": \"tel:0101245678\", \n \n \"customIcon\": \"xxx.png\", \n \n \"icon\": \"\",\n \n \"dataApi\": \"\"\n }，\n {\n \"title\": \"分享\", \n \n \"link\": \"\", \n \n \"customIcon\": \"xxx.png\", \n \n \"icon\": \"share\",\n \n \"dataApi\": \"data-am-navbar-share\"\n }\n ];\n return data;\n*/\n\nvar data = [\n {\n \"title\": \"\", // title 值：要显示的文本\n\n \"link\": \"\", // link 值 ：如果是电话则写\"tel:0101245678\"\n\n \"customIcon\": \"\", // customIcon与下边的icon选用其中之一，customIcon用于上传自定义的小图标，写法：\"customIcon\": context.__root + \"xxx.png\"\n\n \"icon\": \"\", //icon 值,例如：分享的图标在AMUI中是am-icon-share ，则此时的icon写法为： \"icon\": \"share\" \n\n \"dataApi\": \"\" //dataApi 值可以填写\"data-am-navbar-share\"（用于分享模块） 或者\"data-am-navbar-qrcode\"(用于二维码模块)。若要使用自己上传的二维码 'data-am-navbar-qrcode = 二维码地址' 即可\n }\n];\nreturn data;\n",
"hidden": true
"hidden": false
}
widget/navbar/src/navbar.default.less
浏览文件 @ a21e57d3
/**
* Menu Theme: default
* Navbar Theme: default
* Author: hzp (hzp@yunshipei.com)
*/
@navbar-boxshare-bg: lighten(@gray-lighter, 0.5%);
@navbar-bg: @global-primary;
@navbar-link-color: @white;
.am-navbar-default {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: @navbar-bg;
z-index: @z-index-navbar;
.am-navbar-nav {
list-style: none;
padding-left: 0;
> li {
text-align: center;
a {
color: @navbar-link-color;
text-shadow: none;
display: inline-block;
width: 100%;
height: @navbar-height;
font-size: 12px;
text-align: center;
img {
vertical-align: middle;
height: 24px;
width: 24px;
display: inline;
}
@navbar-bg: @global-primary;
@navbar-link-color: @white;
span {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: top;
margin: 4px auto 0;
@navbar-actions-bg: darken(@navbar-bg, 3%);
@navbar-actions-border-bottom: darken(@navbar-bg, 10%);
&:before {
font-size: 22px;
}
}
}
}
}
.am-navbar-more-active {
& > a {
color: @navbar-link-color;
span {
&:before {
content: @fa-var-chevron-down;
color: @navbar-link-color;
}
}
}
a {
color: @navbar-link-color;
}
.hook-am-navbar-default;
}
.am-navbar-top {
.am-navbar-nav {
> li {
a {
line-height: 20px;
img {
display: block;
margin: 4px auto 0
}
span {
display: block;
line-height: 24px;
margin: 4px auto 0
}
}
}
background-color: @navbar-bg;
}
}
.am-navbar-actions {
@navbar-actions-bg: darken(@navbar-bg, 10%);
@navbar-actions-border-top: darken(@navbar-bg, 5%);
@navbar-actions-border-bottom: darken(@navbar-bg, 15%);
@navbar-actions-link-color: @white;
list-style: none;
padding-left: 0;
margin: 0;
background-color: @navbar-actions-bg;
position: fixed;
bottom: 50px;
left: 0;
width: 100%;
z-index: @z-index-navbar - 1;
display: none;
li {
line-height: 40px;
border-top: 1px solid @navbar-actions-border-top;
border-bottom: 1px solid @navbar-actions-border-bottom;
position: relative;
&::after {
font-family: "FontAwesome";
content: @fa-var-angle-right;
color: @navbar-actions-link-color;
display: inline-block;
position: absolute;
top: 0;
right: 20px;
}
// more actions
.am-navbar-actions {
background-color: @navbar-actions-bg;
a {
display: inline-block;
width: 100%;
height: 38px;
color: @navbar-actions-link-color;
padding-left: 30px;
img {
vertical-align: middle;
height: 20px;
width: 20px;
display: inline;
}
border-bottom: 1px solid @navbar-actions-border-bottom;
}
}
}
#bdshare_weixin_qrcode_dialog {
height: 310px !important;
.hook-am-navbar-default;
}
.hook-am-navbar-default() {
}
.hook-am-navbar-default() { }
widget/navbar/src/navbar.hbs
浏览文件 @ a21e57d3
{{#this}}
<div data-am-widget="navbar" class="am-navbar am-cf {{#if theme}}am-navbar-{{theme}}{{else}}am-navbar-default{{/if}} {{#if options.iconpos}}am-navbar-{{options.iconpos}}{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}"
<div data-am-widget="navbar" class="am-navbar am-cf {{#if theme}}am-navbar-{{theme}}{{else}}am-navbar-default{{/if}} {{#if options.iconPosition}}am-navbar-label{{options.iconPosition}}{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}"
id="{{id}}">
{{#if content}}
<ul class="am-navbar-nav am-cf {{#if options.cols}}sm-block-grid-{{options.cols}}{{/if}}">
{{#each content}}
<li class="am-navbar-item" {{#if dataApi}}{{dataApi}}{{/if}}>
<a href="{{#if link}}{{link}}{{/if}}">
<li {{#if dataApi}}{{dataApi}}{{/if}}>
<a href="{{link}}">
{{#if customIcon}}
<img src="{{customIcon}}" alt="{{{title}}}"/>
<img src="{{customIcon}}" alt="{{title}}"/>
{{else}}
{{#if icon}}
<span class="am-icon-{{icon}}"></span>
{{/if}}
{{/if}}
{{#if title}}
{{{title}}}
<span class="am-navbar-label">{{title}}</span>
{{/if}}
</a>
</li>
......
widget/navbar/src/navbar.js
浏览文件 @ a21e57d3
......@@ -2,203 +2,142 @@ define(function(require, exports, module) {
require('core');
var $ = window.Zepto,
qrcode = require('util.qrcode'),
modal = require('ui.modal');
UI = $.AMUI,
QRCode = require('util.qrcode'),
modal = require('ui.modal'),
share = require('ui.share');
var navbarInit = function() {
var _parent = $('.am-navbar'),
parentUl = _parent.find('ul'),
subLi = _parent.find('li'),
oneWidth = subLi.width(),
minWidth = 100, //每个li最小宽度
_more = null,
_moreList = null,
onOff = true,
onOffCreat = true, // 防止多次的创建
$body = $('body');
var $share = $('[data-am-navbar-share]');
var $qrcode = $('[data-am-navbar-qrcode]');
var navbarPosition = _parent.css('position');
if (navbarPosition == 'fixed') {
var $navBar = $('[data-am-widget="navbar"]');
if (!$navBar.length) return;
var $win = $(window),
$body = $('body'),
$navBarNav = $navBar.find('.am-navbar-nav'),
$navItems = $navBar.find('li'),
navItemsCounter = $navItems.length;
configItems = $navBarNav.attr('class') && parseInt($navBarNav.attr('class').match(/sm-block-grid-(\d)/)[1]) || 3,
navMinWidth = 60, //每个li最小宽度
offsetWidth = 16,
$share = $navItems.filter('[data-am-navbar-share]'),
$qrcode = $navItems.filter('[data-am-navbar-qrcode]'),
activeStatus = 'am-active',
$moreActions = $('<ul class="am-navbar-actions"></ul>', {
id: UI.utils.generateGUID('am-navbar-actions')
}),
$moreLink = $('<li class="am-navbar-labels am-navbar-more"><a href="javascript: void(0);"><span class="am-icon-angle-up"></span><span class="am-navbar-label">更多</span></a></li>');
// 如果有 Fix 的工具栏则设置 body 的 padding-bottom
if ($navBar.css('position') == 'fixed') {
$body.addClass('with-fixed-navbar');
}
if ($qrcode.length) {
var qrId = 'am-navbar-qrcode';
$qrModal = $('#' + qrId);
if (!$qrModal.length) {
var qrImg = $qrcode.attr('data-am-navbar-qrcode'),
$qrModal = $('<div class="am-modal am-modal-no-btn" id="">' +
'<div class="am-modal-dialog"><div class="am-modal-bd"></div></div>' +
'</div>', {
id: qrId
}),
$qrContainer = $qrModal.find('.am-modal-bd');
// 判断上传自定义的二维码没有，否则生成二维码
if (qrImg) {
$qrContainer.html('<img src="' + qrImg + '"/>');
} else {
var qrnode = new QRCode({
render: 'canvas',
correctLevel: 0,
text: window.location,
width: 200,
height: 200,
background: '#fff',
foreground: '#000'
});
$qrContainer.html(qrnode);
}
var qrImg = ($('[data-am-navbar-qrcode]').attr('data-am-navbar-qrcode'));
var url = window.location.href;
var qrData = $('<div class="am-modal am-modal-no-btn" id=\'am-navbar-boxqrcode\'>' +
'<div class=\'am-modal-dialog\' id=\'am-navbar-qrcode-data\'></div>' +
'</div>');
$body.append(qrData);
//判断上传自定义的二维码没有，否则生成二维码
if (qrImg) {
$('#am-navbar-qrcode-data').html('<img src="' + qrImg + '"/>');
} else {
var qrnode = new qrcode({
render: 'canvas',
correctLevel: 0,
text: url,
width: 190,
height: 190,
background: '#fff',
foreground: '#000'
});
$('#am-navbar-qrcode-data').html(qrnode);
$body.append($qrModal);
}
$qrcode.on('click', function(e) {
e.preventDefault();
$qrModal.modal();
});
}
//添加share className
$share.addClass('am-navbar-share');
$qrcode.addClass('am-navbar-qrcode');
if (navItemsCounter > configItems && navItemsCounter > calcSuiteItems()) {
initActions();
}
if ($share.length) {
//share start
window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdMiniList": false,
"bdPic": "",
"bdStyle": "1",
"bdSize": "16"
}, "share": {"bdSize": 24}
};
$body.append($('<script />', {
src: 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89343201.js?cdnversion=' + ~(-new Date() / 36e5)
}));
var shareData = '<div class="bdsharebuttonbox">' +
'<div class="am-modal-actions am-modal-out" id="am-navbar-share">' +
'<div class="am-modal-actions-group">' +
'<ul class="am-list">' +
'<li class="am-modal-actions-header" data-cmd="more">分享到</li>' +
'<li><a href="#" class="am-icon-qq" data-cmd="qzone" title="分享到QQ空间">QQ空间</a></li>' +
'<li><a href="#" class="am-icon-weibo" data-cmd="tsina" title="分享到新浪微博">新浪微博</a></li>' +
'<li><a href="#" class="am-icon-tencent-weibo" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a></li>' +
'<li><a href="#" class="am-icon-renren" data-cmd="renren" title="分享到人人网">人人网</a></li>' +
'<li><a href="#" class="am-icon-wechat" data-cmd="weixin" title="分享到微信">微信</a></li>' +
'</ul>' +
'</div>' +
'<div class="am-modal-actions-group"><button type="button" class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button></div>' +
'</div>' +
'</div>';
$body.append(shareData);
$share.on('click', function(event) {
event.preventDefault();
$('#am-navbar-share').modal();
});
function initActions() {
$navBarNav.append($moreLink);
//share end
}
$navBarNav.find('li').not('.am-navbar-more').slice(calcSuiteItems() - 1).appendTo($moreActions);
if ($qrcode.length) {
//qrcode start
$qrcode.on('click', function(event) {
event.preventDefault();
$('#am-navbar-boxqrcode').modal();
});
// Append more actions
$navBar.append($moreActions);
}
//qrcode end
if (_parent.length) {
$body.append($('<ul class="am-navbar-actions"></ul>'));
}
if (_parent.find('li').length * _parent.find('li').width() > $(window).width()) { //如果li没有完全展示
//替换父级的class
displaceClass(_parent.find('li').length, parentUl);
var nowWidth = _parent.find('li').width();
if (nowWidth < minWidth) {
if (onOffCreat) {
addMore();
onOffCreat = false;
}
displaceClass(liLength(), parentUl);
addMoreLi(liLength());
}
}
function checkNavBarItems() {
// console.log('best: %d', calcSuiteItems());
_more = $('.am-navbar-more');
_moreList = $('.am-navbar-actions');
_parent.on('click', '.am-navbar-more', function() {
if (onOff) {
_moreList.css({
bottom: _moreList.height(),
display: 'block'
}).animate({
bottom: 49
}, {
duration: 'fast',
complete: function() {
_more.addClass('am-navbar-more-active');
}
});
onOff = !onOff;
} else {
_moreList.animate({
bottom: -_moreList.height()
}, {
complete: function() {
$(this).css('display', 'none');
_more.removeClass('am-navbar-more-active');
}
});
onOff = !onOff;
if (calcSuiteItems() >= navItemsCounter) {
// 显示所有链接，隐藏 more
$moreLink.hide();
$moreActions.find('li').insertBefore($moreLink);
return;
}
});
//添加more
!$navBar.find('.am-navbar-actions').length && initActions();
function addMore() {
parentUl.append($('<li class="am-navbar-item am-navbar-more"><a href="javascript:;"><span class="am-icon-chevron-up"></span>更多</a></li>'));
}
$moreLink.show();
//删除more
function removeMore() {
parentUl.find('.am-navbar-more').remove();
if ($navBarNav.find('li').length < calcSuiteItems()) {
$moreActions.find('li').slice(0, calcSuiteItems() - $navBarNav.find('li').length).insertBefore($moreLink);
} else if ($navBarNav.find('li').length > calcSuiteItems()) {
if ($moreActions.find('li').length) {
$navBarNav.find('li').not($moreLink).slice(calcSuiteItems() - 1).insertBefore($moreActions.find('li').first());
} else {
$navBarNav.find('li').not($moreLink).slice(calcSuiteItems() - 1).appendTo($moreActions);
}
}
}
//计算合适的长度
function liLength() {
return parseInt($(window).width() / minWidth);
/**
* 计算最适合显示的条目个数
* @returns {number}
*/
function calcSuiteItems() {
return Math.floor(($win.width() - offsetWidth) / navMinWidth);
}
$navBar.on('click.navbar.amui', '.am-navbar-more', function(e) {
e.preventDefault();
//移出parent下的li,并添加到moreList里面
function addMoreLi(len) {
subLi.not('.am-navbar-more').each(function(index) {
if (index > len - 2) {
$(this).appendTo($('.am-navbar-actions'))
}
})
}
$moreLink[$moreActions.hasClass(activeStatus) ? 'removeClass' : 'addClass'](activeStatus);
//移出moreList里面的li,并添加到parent下面
function addParentLi(len) {
$('.am-navbar-actions').children().first().appendTo(parentUl)
}
$moreActions.toggleClass(activeStatus);
});
//替换class
function displaceClass(num, object) {
var $className = object.attr('class').replace(/sm-block-grid-\d/, 'sm-block-grid-' + num);
object.attr('class', $className);
if ($share.length) {
$share.on('click.navbar.amui', function(e) {
e.preventDefault();
share.toggle();
});
}
$win.on('resize.navbar.amui orientationchange.navbar.amui', UI.utils.debounce(checkNavBarItems, 150));
};
// DOMContentLoaded
// DOMContent ready
$(function() {
navbarInit();
});
......
widget/navbar/src/navbar.less
浏览文件 @ a21e57d3
//Base
// Navbar Base
@navbar-height: 49px;
.am-navbar {
padding: 0 10px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: @navbar-height;
line-height:@navbar-height;
line-height: @navbar-height;
z-index: @z-index-navbar;
ul {
padding-left: 0;
margin: 0;
list-style: none;
width: 100%;
}
.am-navbar-nav {
padding-left: 8px;
padding-right: 8px;
text-align: center;
overflow: hidden;
// .flexbox();
li {
//.flex(1);
display: table-cell;
width: 1%;
float: none;
}
}
.hook-am-navbar;
}
@navbar-height: 49px;
.am-navbar-nav {
position: relative;
z-index: @z-index-navbar + 5;
//给body 增加的className
.with-fixed-navbar {
padding-bottom: @navbar-height;
a {
display: inline-block;
width: 100%;
height: @navbar-height;
line-height: 20px;
img {
display: block;
vertical-align: middle;
height: 24px;
width: 24px;
margin: 4px auto 0
}
[class*='am-icon'] {
width: 24px;
height: 24px;
margin: 4px auto 0;
display: block;
line-height: 24px;
&:before {
font-size: 22px;
vertical-align: middle;
}
}
.am-navbar-label {
padding-top: 2px;
line-height: 1;
font-size: 12px;
.text-overflow(block);
}
}
.hook-am-navbar-nav;
}
// share 微信高度
#bdshare_weixin_qrcode_dialog {
height: 310px !important;
.am-navbar-more {
[class*='am-icon-'] {
.transition(0.15s);
}
&.am-active {
[class*='am-icon-'] {
.rotateX(-180deg);
}
}
}
// more actions
.am-navbar-actions {
position: absolute;
bottom: 49px;
right: 0;
left: 0;
z-index: @z-index-navbar - 1;
opacity: 0;
.transition(0.3s);
.translate(0, 100%);
.bdsharebuttonbox {
position: relative;
font-size: 16px !important;
height: 0;
&.am-active {
opacity: 1;
.translate(0, 0);
}
a {
display: block;
width: 100%;
margin: 0 !important;
overflow: hidden;
color: #000;
background: none !important;
height: auto !important;
li {
line-height: 42px;
position: relative;
a {
display: block;
width: 100%;
height: 40px;
box-shadow: inset 0 1px rgba(220, 220, 220, 0.25);
padding-left: 20px;
padding-right: 36px;
:after {
font-family: "FontAwesome";
content: @fa-var-angle-right;
display: inline-block;
position: absolute;
top: 0;
right: 20px;
}
img {
vertical-align: middle;
height: 20px;
width: 20px;
display: inline;
}
}
}
.hook-am-navbar-actions;
}
#am-navbar-boxqrcode {
border: 5px solid @white;
width: 200px;
height: 200px;
overflow: hidden;
#am-navbar-qrcode {
width: 220px;
height: 220px;
margin-left: -100px;
img {
width: 190px;
height: 190px;
.am-modal-bd {
padding: 10px;
}
canvas {
display: inline-block;
width: 200px;
height: 200px;
}
}
.hook-am-navbar() {}
\ No newline at end of file
// 给body 增加的className
.with-fixed-navbar {
padding-bottom: @navbar-height;
}
.hook-am-navbar() {}
.hook-am-navbar-nav() {}
.hook-am-navbar-actions() {}
// TODO: 1. 使用 Flexbox
// 2. 单图标的情形
\ No newline at end of file
widget/navbar/src/navbar.one.less
浏览文件 @ a21e57d3
/**
* Menu Theme: one
* Navbar Theme: one
* Author: hzp (hzp@yunshipei.com)
*/
.am-navbar-one {
@one-primary: #15afef;
.am-navbar-actions {
@global-primary: #15afef;
@navbar-actions-bg: darken(@global-primary, 15%);
@navbar-actions-border-top: darken(@global-primary, 6%);
@navbar-actions-border-bottom: darken(@global-primary, 25%);
@navbar-actions-link-color: @white;
list-style: none;
padding-left: 0;
margin: 0;
background: @navbar-actions-bg;
position: fixed;
bottom: 50px;
left: 0;
width: 100%;
z-index: @z-index-navbar - 1;
display: none;
li {
line-height: 40px;
border-top: 1px solid @navbar-actions-border-top;
border-bottom: 1px solid @navbar-actions-border-bottom;
position: relative;
&::after {
.am-icon-font;
content: @fa-var-angle-right;
color: @navbar-actions-link-color;
display: inline-block;
position: absolute;
top: 12px;
right: 20px;
}
a {
display: inline-block;
width: 100%;
height: 38px;
color: @navbar-actions-link-color;
padding-left: 30px;
@navbar-bg: @one-primary;
@navbar-link-color: @white;
img {
vertical-align: middle;
height: 20px;
width: 20px;
display: inline;
}
}
@navbar-actions-bg: darken(@one-primary, 5%);
@navbar-actions-border-bottom: darken(@one-primary, 12%);
a {
color: @navbar-link-color;
}
}
#bdshare_weixin_qrcode_dialog {
height: 310px !important;
}
.am-navbar-one {
@navbar-bg: @global-primary;
@navbar-link-color: @white;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: @navbar-bg;
z-index: @z-index-navbar;
.am-navbar-nav {
background-color: @navbar-bg;
& > ul {
list-style: none;
padding-left: 0;
}
.am-navbar-item {
text-align: center;
.am-navbar-actions {
background-color: @navbar-actions-bg;
a {
color: @navbar-link-color;
text-shadow: 0 0 0;
display: inline-block;
width: 100%;
height: @navbar-height;
font-size: 12px;
text-align: center;
img {
vertical-align: middle;
height: 24px;
width: 24px;
display: inline;
}
span {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: top;
margin: 4px auto 0;
&:before {
font-size: 22px;
vertical-align: bottom;
}
}
}
}
.am-navbar-more-active {
& > a {
color: @navbar-link-color;
span {
&::before {
.am-icon-font;
content: @fa-var-chevron-down;
color: @navbar-link-color;
}
}
border-bottom: 1px solid @navbar-actions-border-bottom;
}
}
.hook-am-navbar-one;
}
.am-navbar-top {
.am-navbar-nav {
.am-navbar-item {
a {
line-height: 20px;
img {
display: block;
margin: 4px auto 0
}
span {
display: block;
line-height: 24px;
margin: 4px auto 0
}
}
}
}
}
.hook-am-navbar-one() {
}
.hook-am-navbar-one() {}
widget/sohucs/README.md
浏览文件 @ a21e57d3
......@@ -31,7 +31,7 @@
填写邮箱和密码，点击 `注册` 按钮，出现如下界面：
![填写站点信息](/i/sohucs/sohucs-help-1.png)
![填写站点信息](http://i.static.amazeui.org/assets/i/cpts/sohucs/sohucs-help-1.png)
输入网站名称、网址、QQ，点击 `提交并获取代码`。
......@@ -39,7 +39,7 @@
完成上述操作后，进入以下界面，获取 API Key (AppID、Conf)。
![获取代码界面](/i/sohucs/sohucs-help-2.png)
![获取代码界面](http://i.static.amazeui.org/assets/i/cpts/sohucs/sohucs-help-2.png)
如上图所示，复制 AppID 及 Conf（**红框部分，不包含单引号**），填入云适配 IDE 参数设置里完成配置。
......
widget/tabs/HISTORY.md
浏览文件 @ a21e57d3
# Tabs 更新日志
---
## v3.0.0 (2014.08.26)
- `IMPROVED` 使用新提取的 `Tabs` 插件，解决高度自适应问题；
- `CHANGED` 调整数据接口，删除标签宽度选项；
- `IMPROVED` 调整主题。
widget/tabs/README.md
浏览文件 @ a21e57d3
......@@ -19,12 +19,28 @@
- 将组件拖入编辑界面；
- 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
#### Amaze UI 1.0
```javascript
var data = [
{
"title": "", // 选项卡标题
"content": "", // 选项卡内容
"active": false // 是否激活当前选项卡，true | false，只允许一个 Tab 标记为激活
}
];
return data;
```
#### Amaze UI 0.9
```javascript
var data = [
{
"header" : "", //每一个选项的标题
"substance" : "", //内容部分
"class" : "" //显示当前默认被选中的选项卡标题以及其内容，值是"active"，如果有多个选项，只允许一个tab被激活
"header": "", // 选项卡标题
"substance": "", // 选项卡内容
"class": "" // 显示当前默认被选中的选项卡标题以及其内容，值是"active"，如果有多个选项，只允许一个tab被激活
}
];
......@@ -41,16 +57,11 @@ return data;
"theme": "",
"options": {
"cols": "" // 列数
},
// 每一个 Tab 的内容
"content": [
"content": [
{
"header": "",
"substance": "",
"class": ""
"title": "",
"content": "",
"active": ""
}
]
}
......
widget/tabs/package.json
浏览文件 @ a21e57d3
{
"name": "tabs",
"version": "2.0.0",
"version": "3.0.0",
"author": {
"name": "Shengli",
......@@ -31,75 +31,79 @@
"template": "tabs.hbs",
"styleDependencies": [],
"styleDependencies": [
"ui.component.less",
"ui.tabs.less",
"animation.less"
],
"style": "tabs.less",
"demoContent": [
{
"header": "栏目一",
"substance": "栏目一的内容：<br>一行独家JS代码替代传统繁琐的编程开发和数据迁移工作，省去购买域名、服务器和人力开发运维成本，只需几个工作日适配成功，降低传统建站95%以上经济成本和相应时间成本。",
"class": "active"
"title": "青春",
"content": "【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。",
"active": 1
},
{
"header": "栏目二",
"substance": "栏目二的内容：<br>移动网址和PC网址始终一致，无需进行二次推广，有助提升网站在移动搜索引擎上的排名；也利于高值客户和深度客户记忆；同时利于聚合和统计移动流量，分析用户行为，形成大数据库。"
"title": "彩虹",
"content": "【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。"
},
{
"header": "栏目三",
"substance": "栏目三的内容：<br>基于微软云计算平台Windows Azure,一次性打包解决手机和其他移动终端屏幕尺寸碎片化、屏幕分辨率不统一、浏览器分化三大移动终端适配难题，自动识别适配不同终端、系统，适配于全球超过5000种移动设备。"
"title": "歌唱",
"content": "【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。"
}
],
"themes": [
{
"name": "default",
"desc": "浅蓝色选项卡",
"desc": "蓝色选项卡",
"options": {
"cols": 3
},
"hook": "hook-am-tabs-default",
"variables": [
{
"variable": "tabs-bg-color",
"name": "背景颜色",
"variable": "tabs-nav-bg",
"name": "标签背景色",
"default": "#eee",
"used": [
{
"selector": ".am-tabs-hd",
"selector": ".am-tabs-nav",
"property": "background-color"
}
]
},
{
"variable": "tabs-text-color",
"name": "文本颜色",
"default": "#000",
"variable": "tabs-nav-color",
"name": "标签颜色",
"default": "#333",
"used": [
{
"selector": ".am-tabs-hd",
"selector": ".am-tabs-nav a",
"property": "color"
}
]
},
{
"variable": "tabs-active-bg-color",
"name": "活动项背景色",
"default": "#428bca",
"variable": "tabs-nav-active-bg",
"name": "激活标签背景色",
"default": "#0e90d2",
"used": [
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"selector": ".am-tabs-nav > .am-active a",
"property": "background-color"
}
]
},
{
"variable": "tabs-active-text-color",
"name": "活动项文本颜色",
"variable": "tabs-nav-active-color",
"name": "激活标签颜色",
"default": "#fff",
"used": [
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"selector": ".am-tabs-nav > .am-active a",
"property": "color"
}
]
......@@ -124,53 +128,53 @@
"hook": "hook-am-tabs-d2",
"variables": [
{
"variable": "tabs-bg-color",
"name": "背景颜色",
"variable": "tabs-nav-bg",
"name": "标签背景色",
"default": "#eee",
"used": [
{
"selector": ".am-tabs-hd",
"selector": ".am-tabs-nav",
"property": "background-color"
}
]
},
{
"variable": "tabs-text-color",
"name": "文本颜色",
"default": "#000",
"variable": "tabs-nav-color",
"name": "标签颜色",
"default": "#333",
"used": [
{
"selector": ".am-tabs-hd",
"selector": ".am-tabs-nav a",
"property": "color"
}
]
},
{
"variable": "tabs-active-bg-color",
"name": "活动选背景色",
"default": "#FAFAFA",
"variable": "tabs-nav-active-bg",
"name": "激活标签背景色",
"default": "#0e90d2",
"used": [
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"selector": ".am-tabs-nav > .am-active a",
"property": "background-color"
}
]
},
{
"variable": "tabs-a-color",
"name": "活动选文本颜色",
"default": "#2F4DAC",
"variable": "tabs-nav-active-color",
"name": "激活标签颜色",
"default": "#fff",
"used": [
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"selector": ".am-tabs-nav > .am-active a",
"property": "color"
},
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"selector": ".am-tabs-nav > .am-active",
"property": "border-bottom-color"
},
{
"selector": ".am-tabs-hd li.am-tabs-hd-active:after",
"selector": ".am-tabs-nav > .am-active:after",
"property": "border-bottom-color"
}
]
......@@ -195,49 +199,56 @@
"hook": "hook-am-tabs-one",
"variables": [
{
"variable": "tabs-bg-color",
"name": "背景颜色",
"variable": "tabs-color",
"name": "标签背景色",
"default": "#fff",
"used": [
{
"selector": ".am-tabs-hd",
"selector": ".am-tabs-nav",
"property": "background-color"
}
]
},
{
"variable": "tabs-text-color",
"name": "文本颜色",
"variable": "tabs-border-color",
"name": "标签边框颜色",
"default": "#15afef",
"used": [
{
"selector": ".am-tabs-nav, .am-tabs-nav > li + li",
"property": "border-color"
}
]
},
{
"variable": "tabs-nav-color",
"name": "标签颜色",
"default": "#15afef",
"used": [
{
"selector": ".am-tabs-hd",
"selector": ".am-tabs-nav a",
"property": "color"
}
]
},
{
"variable": "tabs-active-bg-color",
"name": "活动背景色",
"variable": "tabs-nav-active-bg",
"name": "激活标签背景色",
"default": "#15afef",
"used": [
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"selector": ".am-tabs-nav > .am-active a",
"property": "background-color"
},
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"property": "border-color"
}
]
},
{
"variable": "tabs-li-text-color",
"name": "活动文本颜色",
"default": "#fff",
"variable": "tabs-nav-active-color",
"name": "激活标签颜色",
"default": "#15afef",
"used": [
{
"selector": ".am-tabs-hd li.am-tabs-hd-active",
"selector": ".am-tabs-nav > .am-active a",
"property": "color"
}
]
......@@ -260,7 +271,9 @@
"util.fastclick.js"
],
"jsDependencies": [],
"jsDependencies": [
"ui.tab.js"
],
"script": "tabs.js",
......@@ -291,50 +304,20 @@
"dataList": "<%= pkg.themes %>"
},
"options": {
"cols": {
"name": "列数",
"desc": "多少个栏目之间切换（建议2-6）",
"type": "select",
"required": false,
"default": 3,
"dataList": [
{
"value": 2,
"title": "2"
},
{
"value": 3,
"title": "3"
},
{
"value": 4,
"title": "4"
},
{
"value": 5,
"title": "5"
},
{
"value": 6,
"title": "6"
}
]
}
},
"options": null,
"content": {
"type": "Array",
"item": {
"header": {
"title": {
"type": "text",
"desc": "Tab 标题"
},
"substance": {
"content": {
"type": "html",
"desc": "Tab 内容"
},
"class": {
"active": {
"type": "text",
"desc": "激活状态（不激活则留空）",
"hidden": true
......@@ -345,7 +328,7 @@
"readme": "http://docs.yunshipei.com/amui/#tabs",
"example": "/*\n 此模块的使用方法：采集原PC网站上的tab切换数据，在手机页面上生成tab切换效果。\n \n 常用用途：通常用来采集一组tab切换标题以及文字等信息。\n \n 了解AMUI的模块详情，请访问http://ide.yunshipei.com/doc/amui/#tabs。\n\n 示例代码：\n \n var data = [];\n $(\".listpart\").eq(1).find(\"li\").each(function(){\n data.push({\n \"header\": $(this).find(\".news-pic\").find(\"img\").src(), \n \"substance\": $(this).find(\".news-pic\").find(\"a\")html(), \n \"class\": \"\"\n });\n });\n return data;\n*/\n\nvar data = [\n {\n \"header\" : \"\", //每一个选项的标题\n \"substance\" : \"\", //内容部分\n \"class\" : \"\" //显示当前默认被选中的选项卡标题以及其内容，值是\"active\"，如果有多个选项，只允许一个tab被激活\n }\n];\nreturn data;\n\n",
"example": "/*\n 此模块的使用方法：采集原PC网站上的tab切换数据，在手机页面上生成tab切换效果。\n \n 常用用途：通常用来采集一组tab切换标题以及文字等信息。\n \n 了解AMUI的模块详情，请访问http://ide.yunshipei.com/doc/amui/#tabs。\n\n 示例代码：\n \n var data = [];\n $(\".listpart\").eq(1).find(\"li\").each(function(){\n data.push({\n \"title\": $(this).find(\".news-pic\").find(\"img\").src(), \n \"content\": $(this).find(\".news-pic\").find(\"a\")html(), \n \"active\": \"\"\n });\n });\n return data;\n*/\n\nvar data = [\n {\n \"title\" : \"\", //每一个选项的标题\n \"content\" : \"\", //内容部分\n \"active\" : \"\" //显示当前默认被选中的选项卡标题以及其内容，值是\"active\"，如果有多个选项，只允许一个tab被激活\n }\n];\nreturn data;\n\n",
"hidden": true
"hidden": false
}
\ No newline at end of file
widget/tabs/src/tabs.d2.less
浏览文件 @ a21e57d3
......@@ -3,33 +3,33 @@
*/
.am-tabs-d2 {
@tabs-nav-bg: @gray-lighter;
@tabs-nav-active-bg: lighten(@gray-lighter, 5.5%);
@tabs-nav-color: @gray-darker;
@tabs-nav-active-color: @global-primary;
@tabs-bg-color: @gray-lighter;
@tabs-active-bg-color: lighten(@gray-lighter, 5.5%);
@tabs-text-color: @gray-darker;
@tabs-a-color: @global-primary;
.am-tabs-nav {
background-color: @tabs-nav-bg;
.am-tabs-hd {
padding: 0;
margin: 0;
line-height: 40px;
color: @tabs-text-color;
background-color: @tabs-bg-color;
> li {
list-style: none;
text-align: center;
li {
height: 42px;
}
> li.am-tabs-hd-active {
background-color: @tabs-active-bg-color;
a {
color: @tabs-nav-color;
line-height: 42px;
}
> .am-active {
position: relative;
border-bottom: 2px solid @tabs-a-color;
height: 40px;
line-height: 39px;
color: @tabs-a-color;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background-color: @tabs-nav-active-bg;
border-bottom: 2px solid @tabs-nav-active-color;
a {
line-height: 40px;
color: @tabs-nav-active-color;
}
&:after {
position: absolute;
width: 0;
......@@ -40,30 +40,12 @@
border: 6px rgba(0, 0, 0, 0) solid;
content: "";
z-index: 1;
border-bottom-color: @tabs-a-color;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
border-bottom-color: @tabs-nav-active-color;
}
}
}
.am-tabs-bd {
padding: 10px 0 0 0;
overflow: hidden;
.am-tabs-bd-content{
width: 3000px;
overflow: hidden;
position: relative;
left: 0;
> div {
float: left;
}
}
}
.hook-am-tabs-d2;
}
.hook-am-tabs-d2() {};
\ No newline at end of file
.hook-am-tabs-d2() {}
widget/tabs/src/tabs.default.less
浏览文件 @ a21e57d3
......@@ -3,44 +3,28 @@
*/
.am-tabs-default {
@tabs-nav-height: 42px;
@tabs-nav-bg: @gray-lighter;
@tabs-nav-color: @gray-darker;
@tabs-nav-active-bg: @global-primary;
@tabs-nav-active-color: @white;
@tabs-bg-color: @gray-lighter;
@tabs-active-bg-color: @global-primary;
@tabs-text-color: @gray-darker;
@tabs-active-text-color: @white;
.am-tabs-hd {
padding: 0;
margin: 0;
.am-tabs-nav {
line-height: 40px;
background-color: @tabs-bg-color;
color: @tabs-text-color;
> li {
list-style: none;
text-align: center;
}
> li.am-tabs-hd-active {
background-color: @tabs-active-bg-color;
color: @tabs-active-text-color;
}
}
.am-tabs-bd {
padding: 10px 0 0 0;
overflow: hidden;
background-color: @tabs-nav-bg;
.am-tabs-bd-content{
width: 3000px;
overflow: hidden;
position: relative;
left: 0;
> div {
//position: relative;
float: left;
}
a {
color: @tabs-nav-color;
line-height: @tabs-nav-height;
}
> .am-active a {
background-color: @tabs-nav-active-bg;
color: @tabs-nav-active-color;
}
}
.hook-am-tabs-default;
}
.hook-am-tabs-default() {};
\ No newline at end of file
.hook-am-tabs-default() {}
widget/tabs/src/tabs.hbs
浏览文件 @ a21e57d3
{{#this }}
<div data-am-widget="tabs" class="am-tabs{{#if theme}} am-tabs-{{theme}}{{else}} am-tabs-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}" {{#if id}}id="{{id}}"{{/if}}>
<ul class="am-tabs-hd am-cf {{#if options.cols}}sm-block-grid-{{options.cols}}{{/if}}">
{{#each content}}
<li class="{{#if class}}am-tabs-hd-active{{/if}}">{{{header}}}</li>
{{/each}}
</ul>
<div class="am-tabs-bd">
<div class="am-tabs-bd-content">
{{#each content}}
<div class="{{#if class}}am-tabs-bd-active{{/if}}">{{{substance}}}</div>
{{/each}}
</div>
</div>
<div data-am-widget="tabs"
class="am-tabs{{#if theme}} am-tabs-{{theme}}{{else}} am-tabs-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}"
{{#if id}}id="{{id}}"{{/if}}>
{{#if content}}
<ul class="am-tabs-nav am-cf">
{{#each content}}
<li class="{{#if active}}am-active{{/if}}"><a href="[data-tab-panel-{{@index}}]">{{{title}}}</a></li>
{{/each}}
</ul>
<div class="am-tabs-bd">
{{#each content}}
<div data-tab-panel-{{@index}} class="am-tab-panel {{#if active}}am-active{{/if}}">
{{{content}}}
</div>
{{/each}}
</div>
{{/if}}
</div>
{{/this }}
\ No newline at end of file
widget/tabs/src/tabs.js
浏览文件 @ a21e57d3
define(function (require, exports, module) {
require('zepto.extend.touch');
require('core');
require('ui.tabs');
var $ = window.Zepto;
var tabsInit = function () {
$('.am-tabs').each(function () {
amTabs($(this));
});
$('[data-am-widget="tabs"]').tabs();
};
function amTabs(parent) {
var $tabsContent = parent.find('.am-tabs-bd-content'),
$tabsDiv = $tabsContent.children(),
oneWidth,
iNow = 0,
disX,
disY,
downY,
downX,
$tabLi = parent.find('.am-tabs-hd').children();
//设置tabsdiv宽度
$tabsContent.width($tabsContent.parent().width() * $tabsDiv.length);
$tabsDiv.width($tabsContent.parent().width());
oneWidth = $tabsDiv.width();
$(window).on('resize', function () {
$tabsContent.width($tabsContent.parent().width() * $tabsDiv.length);
$tabsDiv.width($tabsContent.parent().width());
oneWidth = $tabsDiv.width();
});
/*$tabsContent.on("touchstart MSPointerDown pointerdown", function(ev){
ev.preventDefault();
var oTarget = ev.targetTouches[0];
disX = oTarget.clientX - $tabsContent.offset().left;
disY = oTarget.clientY - $tabsContent.offset().top;
downX = oTarget.clientX;
downY = oTarget.clientY;
$( $tabsContent ).on("touchmove MSPointerMove pointermove", fnMove);
$( $tabsContent ).on("touchend MSPointerUp pointerup", fnUp);
});*/
$tabsContent.swipeRight(function () {
iNow--;
if (iNow < 0) {
iNow = 0;
}
$tabsContent.animate({
'left': -iNow * oneWidth
});
$tabLi.removeClass('am-tabs-hd-active');
$tabLi.eq(iNow).addClass('am-tabs-hd-active');
});
$tabsContent.swipeLeft(function () {
iNow++;
if (iNow > $tabsDiv.length - 1) {
iNow = $tabsDiv.length - 1;
}
$tabsContent.animate({
'left': -iNow * oneWidth
});
$tabLi.removeClass('am-tabs-hd-active');
$tabLi.eq(iNow).addClass('am-tabs-hd-active');
});
$tabLi.on('click', function () {
iNow = $(this).index();
$tabLi.removeClass('am-tabs-hd-active');
$tabLi.eq(iNow).addClass('am-tabs-hd-active');
$tabsContent.animate({
'left': -iNow * oneWidth
});
});
/*
function fnUp(ev){
var oTarget = ev.changedTouches[0];
if( oTarget.clientX - downX < -70 ){
//('←');
if( iNow == $tabsDiv.length-1 ){
//iNow = 0;
}
else{
iNow++;
}
$tabsContent.animate({
"left": -iNow * oneWidth
})
}else if(oTarget.clientX - downX > 70){
//('→');
if( iNow == 0 ){
//iNow = 0;
}
else{
iNow--;
}
$tabsContent.animate({
"left": -iNow * oneWidth
});
}else{
$tabsContent.animate({
"left": -iNow * oneWidth
});
}
$tabLi.removeClass( "am-tabs-hd-active" );
$tabLi.eq( iNow ).addClass( "am-tabs-hd-active" );
$( $tabsContent ).off( "touchend MSPointerUp pointerup", fnUp );
$( $tabsContent ).off( "touchmove MSPointerMove pointermove", fnMove );
}
*/
/*function fnMove(ev){
var oTarget = ev.targetTouches[0];
ev.stopPropagation();
if(Math.abs( oTarget.clientX - downX)){
ev.preventDefault();
$tabsContent.css( "left", oTarget.clientX - disX );
}
if(Math.abs( oTarget.clientY - downY) > 10){
$('body').scrollTop( $('body').scrollTop() - (oTarget.clientY - downY)/10 );
}
}*/
}
$(function () {
tabsInit();
});
......
widget/tabs/src/tabs.less
浏览文件 @ a21e57d3
//
// Tabs core
.am-tabs {
}
// 和 Tabs 插件的样式区分开
[data-am-widget='tabs'] {
margin: 10px;
.am-tabs-nav {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
li {
display: table-cell;
width: 1%;
}
a {
.text-overflow(block);
}
}
}
\ No newline at end of file
widget/tabs/src/tabs.one.less
浏览文件 @ a21e57d3
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或