Skip to content

A
amazeui

Miykael_xxm / amazeui

通知 1
Star 0
Fork 0
A
amazeui

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

提交 d2064634 编写于 作者: M Minwe LUO
浏览文件
操作

Merge pull request #125 from allmobilize/codename-h 

Codename h
上级 56bca256 c1d84484
隐藏空白更改
内联 并排
Showing with 208 addition and 126 deletion
CHANGELOG.md
浏览文件 @ d2064634
......@@ -2,6 +2,25 @@
---
### 2014.10.10 W1
__CSS__：
- 增加 OSX 平台 Firefox(25+) 字体平滑样式；
__JS插件__：
- `NEW` Modal 增加宽度响应，视口大于 640 时，modal 的窗口的宽度显示为 540px；
- `IMPROVED` #79 OffCanvas 调整；
- `IMPROVED` #119 PureView loading 图标 z-index 调整，兼容渣浏览器；
- `IMPROVED` #120 PureView 图片容器 flexbox 样式调整，兼容渣浏览器。
__Web 组件__：
- `NEW` Header 增加固定顶部样式。
- `FIXED` 修复 Figure、Gallery、Paragraph 图片查看变形， via #120 #119
### 2014.09 W5
- `NEW` 文档标题添加链接按钮；
......
docs/about/resources.md
浏览文件 @ d2064634
......@@ -10,81 +10,81 @@ Amaze UI Logo 存放在 [项目 vendor/amazeui](https://github.com/allmobilize/a
### 黑色字母
`````html
<img width="200" src="http://i.static.amazeui.org/assets/i/brand/amazeui-b.png" alt="Amaze UI Logo"/>
<img width="200" src="http://cdn.amazeui.org/assets/i/brand/amazeui-b.png" alt="Amaze UI Logo"/>
`````
__PNG:__
```html
<img width="200" src="http://i.static.amazeui.org/assets/i/brand/amazeui-b.png" alt="Amaze UI Logo"/>
<img width="200" src="http://cdn.amazeui.org/assets/i/brand/amazeui-b.png" alt="Amaze UI Logo"/>
```
__SVG:__
```html
<img width="200" src="http://i.static.amazeui.org/assets/i/brand/amazeui-b.svg" alt="Amaze UI Logo"/>
<img width="200" src="http://cdn.amazeui.org/assets/i/brand/amazeui-b.svg" alt="Amaze UI Logo"/>
```
### 白色字母
`````html
<img width="200" style="background: #8058A5; padding: 10px" src="http://i.static.amazeui.org/assets/i/brand/amazeui-cw.png" alt="Amaze UI Logo"/>
<img width="200" style="background: #8058A5; padding: 10px" src="http://cdn.amazeui.org/assets/i/brand/amazeui-cw.png" alt="Amaze UI Logo"/>
`````
__PNG:__
```html
<img width="200" src="http://i.static.amazeui.org/assets/i/brand/amazeui-cw.png" alt="Amaze UI Logo"/>
<img width="200" src="http://cdn.amazeui.org/assets/i/brand/amazeui-cw.png" alt="Amaze UI Logo"/>
```
__SVG:__
```html
<img width="200" src="http://i.static.amazeui.org/assets/i/brand/amazeui-cw.svg" alt="Amaze UI Logo"/>
<img width="200" src="http://cdn.amazeui.org/assets/i/brand/amazeui-cw.svg" alt="Amaze UI Logo"/>
```
### 纯白
`````html
<img width="200" style="background: #8058A5; padding: 10px" src="http://i.static.amazeui.org/assets/i/brand/amazeui-w.png" alt="Amaze UI Logo"/>
<img width="200" style="background: #8058A5; padding: 10px" src="http://cdn.amazeui.org/assets/i/brand/amazeui-w.png" alt="Amaze UI Logo"/>
`````
__PNG:__
```html
<img width="200" src="http://i.static.amazeui.org/assets/i/brand/amazeui-w.png" alt="Amaze UI Logo"/>
<img width="200" src="http://cdn.amazeui.org/assets/i/brand/amazeui-w.png" alt="Amaze UI Logo"/>
```
__SVG:__
```html
<img width="200" src="http://i.static.amazeui.org/assets/i/brand/amazeui-w.svg" alt="Amaze UI Logo"/>
<img width="200" src="http://cdn.amazeui.org/assets/i/brand/amazeui-w.svg" alt="Amaze UI Logo"/>
```
### 独立图形
`````html
<img width="60" style="padding: 10px; margin-right: 10px" src="http://i.static.amazeui.org/assets/i/brand/amazeui-s.png" alt="Amaze UI Logo"/>
<img width="60" style="padding: 10px; margin-right: 10px" src="http://cdn.amazeui.org/assets/i/brand/amazeui-s.png" alt="Amaze UI Logo"/>
<img width="60" style="background: #8058A5; padding: 10px" src="http://i.static.amazeui.org/assets/i/brand/amazeui-sw.png" alt="Amaze UI Logo"/>
<img width="60" style="background: #8058A5; padding: 10px" src="http://cdn.amazeui.org/assets/i/brand/amazeui-sw.png" alt="Amaze UI Logo"/>
`````
__PNG:__
```html
<!-- 彩色 -->
<img src="http://i.static.amazeui.org/assets/i/brand/amazeui-s.png" alt="Amaze UI Logo"/>
<img src="http://cdn.amazeui.org/assets/i/brand/amazeui-s.png" alt="Amaze UI Logo"/>
<!-- 白色 -->
<img src="http://i.static.amazeui.org/assets/i/brand/amazeui-sw.png" alt="Amaze UI Logo"/>
<img src="http://cdn.amazeui.org/assets/i/brand/amazeui-sw.png" alt="Amaze UI Logo"/>
```
__SVG:__
```html
<!-- 彩色 -->
<img src="http://i.static.amazeui.org/assets/i/brand/amazeui-s.svg" alt="Amaze UI Logo"/>
<img src="http://cdn.amazeui.org/assets/i/brand/amazeui-s.svg" alt="Amaze UI Logo"/>
<!-- 白色 -->
<img src="http://i.static.amazeui.org/assets/i/brand/amazeui-sw.svg" alt="Amaze UI Logo"/>
<img src="http://cdn.amazeui.org/assets/i/brand/amazeui-sw.svg" alt="Amaze UI Logo"/>
```
\ No newline at end of file
docs/css.md
浏览文件 @ d2064634
......@@ -255,7 +255,7 @@ Amaze UI CSS class 命名遵循关注分离、松耦合的原则，同时注重
当 HTML 源代码满眼望去都是 class 时，是不是很抓狂？
不过为了实现代码复用，减少重复冗余，难免要把代码拆分在不同的 class 下面。我们只能寻找一个平衡点，避免过细的拆分，较少不必要的 class。
不过为了实现代码复用，减少重复冗余，难免要把代码拆分在不同的 class 下面。我们只能寻找一个平衡点，避免过细的拆分，减少不必要的 class。
### 选择符书写
......
docs/css/typography.md
浏览文件 @ d2064634
......@@ -74,17 +74,21 @@ body {
另外，在 Webkit 浏览器下还设置了反锯齿平滑渲染，渲染出来要纤细一些，其他内核的浏览器上看着稍粗一些。
__2014.10.10 update:__ OSX 平台的 Firefox 从 v25 增加了 `-moz-osx-font-smoothing`，实现类似 Webkit 的字体渲染效果。
```css
html {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
如果你不喜欢，可以重置成浏览器的默认平滑字体。
```css
html {
body {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
```
......@@ -96,7 +100,7 @@ html {
千萬不要因為走得太久，而忘記了我們為什麼出發。
</p>
<br/>
<div style="-webkit-font-smoothing: subpixel-antialiased;">
<div style="-webkit-font-smoothing: subpixel-antialiased;-moz-osx-font-smoothing: auto">
<h3>未开启反锯齿 <code>-webkit-font-smoothing: subpixel-antialiased;</code></h3>
<p>
......@@ -115,7 +119,7 @@ html {
千萬不要因為走得太久，而忘記了我們為什麼出發。
</p>
<br/>
<div style="-webkit-font-smoothing: subpixel-antialiased;">
<div style="-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto">
<h3>-webkit-font-smoothing: subpixel-antialiased;</h3>
<p >
The quick brown fox jumps over the lazy dog. <br/>
......@@ -128,6 +132,7 @@ html {
参考链接：
- [-webkit-font-smoothing](http://ued.ctrip.com/blog/wp-content/webkitcss/prop/font-smoothing.html)
- [Better font-rendering on OSX](http://maximilianhoffmann.com/posts/better-font-rendering-on-osx)
### 字体相关链接
......
docs/getting-started/credits.md
浏览文件 @ d2064634
......@@ -15,7 +15,7 @@ Amaze UI 的诞生，依托于 GitHub 及其他技术社区上一些优秀的资
<!--
### RC1
[@John.Wall](http://t.qq.com/wangzj141)、@ayhome、[@啸沧海](http://t.qq.com/seecool)、[@成都高校联盟](http://www.cdunu.com/)
[@John.Wall](http://t.qq.com/wangzj141)、@ayhome、[@啸沧海](http://t.qq.com/seecool)、[@成都高校联盟](http://www.cdunu.com/)、@Henry、[@Kimi](http://weibo.com/2536228053)、@nswish
-->
### Beta2
......
gulpfile.js
浏览文件 @ d2064634
......@@ -5,22 +5,7 @@ var format = require('util').format;
var exec = require('child_process').exec;
var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('gulp-less');
var changed = require('gulp-changed');
var watch = require('gulp-watch');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var bower = require('gulp-bower');
var transport = require('gulp-cmd-transport');
var header = require('gulp-header');
var footer = require('gulp-footer');
var clean = require('gulp-clean');
var zip = require('gulp-zip');
var replace = require('gulp-replace');
var $ = require('gulp-load-plugins')();
var pkg = require('./package.json');
var transportDir = '.build/ts/';
......@@ -47,31 +32,20 @@ var jsBase = [
'zepto.extend.selector.js'
];
var seajs = path.join(__dirname, 'vendor/seajs/sea.js');
var seaUse = '';
var seaUseBasic = '';
var seaUseWidgets = '';
var jsWidgets = [];
var plugins;
var allPlugins;
var pluginsUsed;
var pluginsNotUsed;
var jsAll;
var jsAllSorted;
var jsBasic;
var jsBasicSorted;
var jsWidgetsSorted;
var dateFormat = 'UTC:yyyy-mm-dd"T"HH:mm:ss Z';
var banner = [
'/*! <%= pkg.title %> v<%= pkg.version %><%=ver%>',
'by Amaze UI Team',
'(c) ' + gutil.date(Date.now(), 'UTC:yyyy') + ' AllMobilize, Inc.',
'(c) ' + $.util.date(Date.now(), 'UTC:yyyy') + ' AllMobilize, Inc.',
'Licensed under <%= pkg.license.type %>',
gutil.date(Date.now(), dateFormat) + ' */ \n'
$.util.date(Date.now(), dateFormat) + ' */ \n'
].join(' | ');
var seajs = path.join(__dirname, 'vendor/seajs/sea.js');
var seaUse = '', seaUseBasic = '', seaUseWidgets = '', jsWidgets = [], plugins, allPlugins, pluginsUsed, pluginsNotUsed, jsAll, jsAllSorted, jsBasic, jsBasicSorted, jsWidgetsSorted;
// write widgets style and tpl
var preparingData = function() {
var fsOptions = {encoding: 'utf8'};
......@@ -136,16 +110,14 @@ var preparingData = function() {
* Prepare JavaScript Data
*/
// for amui.basic.js
// for amazeui.basic.js
jsBasic = _.union(jsBase, allPlugins);
// for amui.all.js
// for amazeui.js
jsAll = _.union(jsBasic, jsWidgets);
jsWidgets = _.union(jsBase, jsWidgets);
// console.log(jsWidgets);
pluginsNotUsed = _.difference(plugins, jsWidgets);
var pluginsUsed = _.remove(plugins, function(plugin) {
......@@ -191,15 +163,14 @@ var preparingData = function() {
fs.writeFileSync(path.join('./vendor/amazeui.hbs.partials.js'), partials);
};
// build to dist dir
gulp.task('buildLess', function() {
gulp.src(['./less/amui.less', './less/amazeui.widgets.less', './less/amazeui.less'])
.pipe(header(banner, {pkg: pkg, ver: ''}))
.pipe(less({
.pipe($.header(banner, {pkg: pkg, ver: ''}))
.pipe($.less({
paths: [path.join(__dirname, 'less'), path.join(__dirname, 'widget/*/src')]
}))
.pipe(rename(function (path) {
.pipe($.rename(function (path) {
if (path.basename === 'amui') {
path.basename = pkg.name + '.basic'
}
......@@ -207,35 +178,30 @@ gulp.task('buildLess', function() {
.pipe(gulp.dest(dist.css))
// Disable advanced optimizations - selector & property merging, reduction, etc.
// for Issue #19 https://github.com/allmobilize/amazeui/issues/19
.pipe(minifyCSS({noAdvanced: true}))
.pipe(rename({
.pipe($.minifyCss({noAdvanced: true}))
.pipe($.rename({
suffix: '.min',
extname: ".css"
}))
.pipe(gulp.dest(dist.css));
});
gulp.task('bower', function() {
bower()
$.bower()
.pipe(gulp.dest('vendor/'))
});
// copy ui js files to build dir
gulp.task('copyWidgetJs', function() {
gutil.log(gutil.colors.yellow('Start copy UI js files to build dir....'));
$.util.log($.util.colors.yellow('Start copy UI js files to build dir....'));
return gulp.src(jsPaths.widgets, {cwd: './widget'})
.pipe(rename(function(path) {
.pipe($.rename(function(path) {
path.dirname = ""; // remove widget dir
}))
.pipe(gulp.dest(buildTmpDir));
});
// copy widgets js files to build dir
gulp.task('copyUIJs', ['copyWidgetJs'], function() {
return gulp.src(['*.js', '!./js/zepto.calendar.js'], {
cwd: './js'
......@@ -246,64 +212,64 @@ gulp.task('copyUIJs', ['copyWidgetJs'], function() {
// gulp cmd transport
gulp.task('transport', ['copyUIJs'], function() {
return gulp.src(['*.js'], {cwd: buildTmpDir})
.pipe(transport({paths: [buildTmpDir]}))
.pipe($.cmdTransport({paths: [buildTmpDir]}))
.pipe(gulp.dest(transportDir));
});
// concat amui.all.js
// concat amazeui.js
gulp.task('concatAll', ['transport'], function() {
return gulp.src(jsAllSorted, {cwd: transportDir})
.pipe(concat(pkg.name + '.js'))
.pipe(header(banner, {pkg: pkg, ver: ''}))
.pipe(footer('\n<%=use%>', {use: seaUse}))
.pipe($.concat(pkg.name + '.js'))
.pipe($.header(banner, {pkg: pkg, ver: ''}))
.pipe($.footer('\n<%=use%>', {use: seaUse}))
.pipe(gulp.dest(dist.js))
.pipe(uglify({
.pipe($.uglify({
mangle: {
except: ['require']
}
}))
.pipe(header(banner, {pkg: pkg, ver: ''}))
.pipe(rename({
.pipe($.header(banner, {pkg: pkg, ver: ''}))
.pipe($.rename({
suffix: '.min',
extname: ".js"
}))
.pipe(gulp.dest(dist.js));
});
// concat amui.basic.js
// concat amazeui.basic.js
gulp.task('concatBasic', ['concatAll'], function() {
return gulp.src(jsBasicSorted, {cwd: transportDir})
.pipe(concat(pkg.name + '.basic.js'))
.pipe(header(banner, {pkg: pkg, ver: ' ~ basic'}))
.pipe(footer('\n<%=use%>', {use: seaUseBasic}))
.pipe($.concat(pkg.name + '.basic.js'))
.pipe($.header(banner, {pkg: pkg, ver: ' ~ basic'}))
.pipe($.footer('\n<%=use%>', {use: seaUseBasic}))
.pipe(gulp.dest(dist.js))
.pipe(uglify({
.pipe($.uglify({
mangle: {
except: ['require']
}
}))
.pipe(header(banner, {pkg: pkg, ver: ' ~ basic'}))
.pipe(rename({
.pipe($.header(banner, {pkg: pkg, ver: ' ~ basic'}))
.pipe($.rename({
suffix: '.min',
extname: ".js"
}))
.pipe(gulp.dest(dist.js))
});
// concat amui.widgets.js
// concat amazeui.widgets.js
gulp.task('concatWidgets', ['concatBasic'], function() {
return gulp.src(jsWidgetsSorted, {cwd: transportDir})
.pipe(concat(pkg.name + '.widgets.js'))
.pipe(header(banner, {pkg: pkg, ver: ' ~ widgets'}))
.pipe(footer('\n<%=use%>', {use: seaUseWidgets}))
.pipe($.concat(pkg.name + '.widgets.js'))
.pipe($.header(banner, {pkg: pkg, ver: ' ~ widgets'}))
.pipe($.footer('\n<%=use%>', {use: seaUseWidgets}))
.pipe(gulp.dest(dist.js))
.pipe(uglify({
.pipe($.uglify({
mangle: {
except: ['require']
}
}))
.pipe(header(banner, {pkg: pkg, ver: ' ~ widgets'}))
.pipe(rename({
.pipe($.header(banner, {pkg: pkg, ver: ' ~ widgets'}))
.pipe($.rename({
suffix: '.min',
extname: ".js"
}))
......@@ -313,24 +279,23 @@ gulp.task('concatWidgets', ['concatBasic'], function() {
gulp.task('concat', ['concatAll', 'concatBasic', 'concatWidgets']);
gulp.task('clean', ['concatWidgets'], function() {
gutil.log(gutil.colors.green('Finished build js, cleaning...'));
$.util.log($.util.colors.green('Finished build js, cleaning...'));
gulp.src('./.build', {read: false})
.pipe(clean({force: true}));
.pipe($.clean({force: true}));
});
gulp.task('hbsHelper', function() {
gulp.src(jsPaths.hbsHelper)
.pipe(concat(pkg.name + '.widgets.helper.js'))
.pipe(header(banner, {pkg: pkg, ver: ' ~ helper'}))
.pipe($.concat(pkg.name + '.widgets.helper.js'))
.pipe($.header(banner, {pkg: pkg, ver: ' ~ helper'}))
.pipe(gulp.dest(dist.js))
.pipe(uglify({
.pipe($.uglify({
mangle: {
except: ['require']
}
}))
.pipe(header(banner, {pkg: pkg, ver: ' ~ helper'}))
.pipe(rename({
.pipe($.header(banner, {pkg: pkg, ver: ' ~ helper'}))
.pipe($.rename({
suffix: '.min',
extname: ".js"
}))
......@@ -346,8 +311,8 @@ gulp.task('appServer', function() {
});
});
// Rerun the task when a file changes
// Rerun the task when a file changes
gulp.task('watch', function() {
gulp.watch(['js/*.js', 'widget/*/src/*.js'], ['buildJs']);
gulp.watch(['less/**/*.less', 'widget/*/src/*.less'], ['buildLess']);
......@@ -369,8 +334,8 @@ gulp.task('zipCopyJs', ['zipCopyCSS'], function() {
gulp.task('zipAdd', ['zipCopyJs'], function() {
return gulp.src(['docs/examples/**/*'])
.pipe(replace(/\{\{assets\}\}/g, 'assets/', {skipBinary: true}))
.pipe(zip(format('AmazeUI-%s-%s.zip', pkg.version, gutil.date(Date.now(), 'UTC:yyyymmdd')), {comment: 'Created on ' + gutil.date(Date.now(), dateFormat)}))
.pipe($.replace(/\{\{assets\}\}/g, 'assets/', {skipBinary: true}))
.pipe($.zip(format('AmazeUI-%s-%s.zip', pkg.version, $.util.date(Date.now(), 'UTC:yyyymmdd')), {comment: 'Created on ' + $.util.date(Date.now(), dateFormat)}))
.pipe(gulp.dest('dist'));
});
......@@ -378,7 +343,7 @@ gulp.task('zipClean', ['zipAdd'], function() { // zipClean
return gulp.src(['docs/examples/assets/*/amazeui.*',
'./docs/examples/assets/js/handlebars.min.js',
'./docs/examples/assets/js/zepto.min.js'], {read: false})
.pipe(clean({force: true}));
.pipe($.clean({force: true}));
});
gulp.task('zip', ['zipClean']);
......
less/ui.modal.less
浏览文件 @ d2064634
......@@ -13,12 +13,12 @@
========================================================================== */
.am-modal {
width: 270px;
width: @modal-sm;
position: fixed;
display: none;
z-index: @z-index-modal;
left: 50%;
margin-left: -135px;
margin-left: -@modal-sm/2;
margin-top: 0;
top: 50%;
text-align: center;
......@@ -46,6 +46,16 @@
.transition-duration(@modal-duration);
.transform(translate3d(0, 0, 0) scale(0.815));
}
@media @medium-up {
width: @modal-md;
margin-left: -@modal-md/2;
}
/*@media @large-up {
width: @modal-lg;
margin-left: -@modal-lg/2;
}*/
}
.am-modal-dialog {
......
less/variables.less
浏览文件 @ d2064634
......@@ -241,9 +241,11 @@
@z-index-pureview: @global-z-index + 120;
@z-index-nprogress: @global-z-index + 1000;
@z-index-navbar: @global-z-index + 10; // THIS IS WIDGET
@z-index-gotop-fixed: @global-z-index + 40; // THIS IS WIDGET
@z-index-menu: @global-z-index + 50; // THIS IS WIDGET
// Widgets
@z-index-navbar: @global-z-index + 10;
@z-index-header-fixed: @global-z-index + 10;
@z-index-gotop-fixed: @global-z-index + 40;
@z-index-menu: @global-z-index + 50;
// ========================================================================
......@@ -1373,9 +1375,9 @@
@modal-popup-duration: @modal-duration;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
@modal-lg: 810px;
@modal-md: 540px;
@modal-sm: 270px;
// Off-canvas
......
tools/app/views/index.hbs
浏览文件 @ d2064634
......@@ -10,7 +10,7 @@
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="/assets/i/favicon.png">
<link rel="stylesheet" href="/assets/css/amui.all.min.css">
<link rel="stylesheet" href="/css/amazeui.css">
<link rel="stylesheet" href="/style.css">
</head>
<body>
......@@ -52,7 +52,7 @@
<script src="/amazeui.hbs.helper.js"></script>
<script src="/amazeui.hbs.partials.js"></script>
<script src="/zepto/zepto.min.js?ver=1.1.4"></script>
<script src="/assets/js/amui.js"></script>
<script src="/js/amazeui.js"></script>
{{#unless demoDetail}}
<script>
......
vendor/amazeui.hbs.partials.js
浏览文件 @ d2064634
......@@ -14,7 +14,7 @@
hbs.registerPartial("gotop", "{{#this}}\n <div data-am-widget=\"gotop\" class=\"am-gotop {{#if theme}}am-gotop-{{theme}}{{else}}am-gotop-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{#if id}}id=\"{{id}}\"{{/if}}>\n <a href=\"#top\" title=\"{{content.title}}\">\n {{#if content.title}}\n <span class=\"am-gotop-title\">{{content.title}}</span>\n {{/if}}\n {{#if content.customIcon}}\n <img class=\"am-gotop-icon-custom\" src=\"{{content.customIcon}}\" />\n {{else}}\n {{#if content.icon}}\n <i class=\"am-gotop-icon am-icon-{{content.icon}}\"></i>\n {{else}}\n <i class=\"am-gotop-icon am-icon-chevron-up\"></i>\n {{/if}}\n {{/if}}\n </a>\n </div>\n{{/this}}");
hbs.registerPartial("header", "{{#this}}\n <header data-am-widget=\"header\"\n class=\"am-header{{#if theme}} am-header-{{theme}}{{else}} am-header-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"{{#if id}}\n id=\"{{id}}\"{{/if}}>\n {{#if content.left}}\n <div class=\"am-header-left am-header-nav\">\n {{#each content.left}}\n <a href=\"{{link}}\" class=\"{{className}}\">\n {{#if title}}\n <span class=\"am-header-nav-title\">\n {{title}}\n </span>\n {{/if}}\n\n {{# if customIcon}}\n <img class=\"am-header-icon-custom\" src=\"{{customIcon}}\" alt=\"\"/>\n {{else}}\n {{#if icon}}\n <i class=\"am-header-icon am-icon-{{icon}}\"></i>\n {{/if}}\n {{/if}}\n </a>\n {{/each}}\n </div>\n {{/if}}\n\n {{#if content.title}}\n <h1 class=\"am-header-title\">\n {{#if content.link}}\n <a href=\"{{content.link}}\">\n {{{content.title}}}\n </a>\n {{else}}\n {{{content.title}}}\n {{/if}}\n </h1>\n {{/if}}\n\n {{#if content.right}}\n <div class=\"am-header-right am-header-nav\">\n {{#each content.right}}\n <a href=\"{{link}}\" class=\"{{className}}\">\n {{#if title}}\n <span class=\"am-header-nav-title\">\n {{title}}\n </span>\n {{/if}}\n\n {{# if customIcon}}\n <img class=\"am-header-icon-custom\" src=\"{{customIcon}}\" alt=\"\"/>\n {{else}}\n {{#if icon}}\n <i class=\"am-header-icon am-icon-{{icon}}\"></i>\n {{/if}}\n {{/if}}\n </a>\n {{/each}}\n </div>\n {{/if}}\n </header>\n{{/this}}");
hbs.registerPartial("header", "{{#this}}\n <header data-am-widget=\"header\"\n class=\"am-header{{#if theme}} am-header-{{theme}}{{else}} am-header-default{{/if}}{{#if options.fixed}} am-header-fixed{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"{{#if id}}\n id=\"{{id}}\"{{/if}}>\n {{#if content.left}}\n <div class=\"am-header-left am-header-nav\">\n {{#each content.left}}\n <a href=\"{{link}}\" class=\"{{className}}\">\n {{#if title}}\n <span class=\"am-header-nav-title\">\n {{title}}\n </span>\n {{/if}}\n\n {{# if customIcon}}\n <img class=\"am-header-icon-custom\" src=\"{{customIcon}}\" alt=\"\"/>\n {{else}}\n {{#if icon}}\n <i class=\"am-header-icon am-icon-{{icon}}\"></i>\n {{/if}}\n {{/if}}\n </a>\n {{/each}}\n </div>\n {{/if}}\n\n {{#if content.title}}\n <h1 class=\"am-header-title\">\n {{#if content.link}}\n <a href=\"{{content.link}}\">\n {{{content.title}}}\n </a>\n {{else}}\n {{{content.title}}}\n {{/if}}\n </h1>\n {{/if}}\n\n {{#if content.right}}\n <div class=\"am-header-right am-header-nav\">\n {{#each content.right}}\n <a href=\"{{link}}\" class=\"{{className}}\">\n {{#if title}}\n <span class=\"am-header-nav-title\">\n {{title}}\n </span>\n {{/if}}\n\n {{# if customIcon}}\n <img class=\"am-header-icon-custom\" src=\"{{customIcon}}\" alt=\"\"/>\n {{else}}\n {{#if icon}}\n <i class=\"am-header-icon am-icon-{{icon}}\"></i>\n {{/if}}\n {{/if}}\n </a>\n {{/each}}\n </div>\n {{/if}}\n </header>\n{{/this}}");
hbs.registerPartial("intro", "{{#this }}\n <div data-am-widget=\"intro\"\n class=\"am-intro am-cf {{#if theme}}am-intro-{{theme}}{{else}}am-intro-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"\n {{#if id}}id=\"{{id}}\"{{/if}}>\n {{#if content.title}}\n <div class=\"am-intro-hd\">\n <h2 class=\"am-intro-title\">{{{content.title}}}</h2>\n {{#if content.more.link}}\n {{#ifCond options.position '==' 'top'}}\n <a class=\"am-intro-more am-intro-more-top\" href=\"{{content.more.link}}\">{{content.more.title}}</a>\n {{/ifCond}}\n {{/if}}\n </div>\n {{/if}}\n\n <div class=\"am-g am-intro-bd\">\n {{#if content.left}}\n <div\n class=\"am-intro-left am-col {{#if options.leftCols}}col-sm-{{options.leftCols}}{{/if}}\">{{{content.left}}}</div>\n {{/if}}\n {{#if content.right}}\n <div\n class=\"am-intro-right am-col {{#if options.rightCols}}col-sm-{{options.rightCols}}{{/if}}\">{{{content.right}}}</div>\n {{/if}}\n </div>\n {{#ifCond options.position '==' 'bottom'}}\n <div class=\"am-intro-more-bottom\">\n <a class=\"am-btn am-btn-default\"\n href=\"{{content.more.link}}\">{{content.more.title}}</a>\n </div>\n {{/ifCond}}\n </div>\n{{/this}}");
......
widget/header/HISTORY.md
浏览文件 @ d2064634
# Header 更新日志
---
## ver 1.1.0 (2014.10.11)
- `NEW` 增加固定位置样式；
## ver 1.0.0 (2014.08.08)
- `NEW` 新增页头组件
\ No newline at end of file
- `NEW` 新增页头组件；
\ No newline at end of file
widget/header/README.md
浏览文件 @ d2064634
......@@ -3,6 +3,50 @@
页头组件，为移动页面顶部的导航条设计。
## 顶部固定
在默认样式的基础上添加 `.am-header-fixed`。
__默认样式：__
```css
.am-header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1010;
}
```
```html
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
<div class="am-header-left am-header-nav">
<a href="#left-link" class="">
<i class="am-header-icon am-icon-home"></i>
</a>
</div>
<h1 class="am-header-title">
<a href="#title-link">Amaze UI</a>
</h1>
<div class="am-header-right am-header-nav">
<a href="#right-link" class="">
<i class="am-header-icon am-icon-bars"></i>
</a>
</div>
</header>
```
如果页面中有固定顶部的 Header，JS 会在 `<body>` 上添加 `.am-with-fixed-header`，这个 class 下面默认设置了 `padding-top: 49px`，可以根据具体情况做调整。
```css
.am-with-fixed-header {
padding-top: @am-header-height;
}
```
## 使用方法
### 直接使用
......@@ -56,7 +100,9 @@ return data;
"theme": "",
"options": null,
"options": {
"fixed": false
},
"content": {
"left": [{
......
widget/header/package.json
浏览文件 @ d2064634
{
"name": "header",
"version": "1.0.0",
"version": "1.1.0",
"localName": {
"en": "Header",
......@@ -104,7 +104,7 @@
"icon": "home",
"customIcon": "data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 20\"><path d=\"M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z\" fill=\"%23fff\"/></svg>"
}],
"title": "<img src=\"http://i.static.amazeui.org/assets/i/brand/amazeui-cw.png\" />",
"title": "<img src=\"http://cdn.amazeui.org/assets/i/brand/amazeui-cw.png\" />",
"right": [{
"link": "#right-link",
"customIcon": "data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 42 26\" fill=\"%23fff\"><rect width=\"4\" height=\"4\"/><rect x=\"8\" y=\"1\" width=\"34\" height=\"2\"/><rect y=\"11\" width=\"4\" height=\"4\"/><rect x=\"8\" y=\"12\" width=\"34\" height=\"2\"/><rect y=\"22\" width=\"4\" height=\"4\"/><rect x=\"8\" y=\"23\" width=\"34\" height=\"2\"/></svg>"
......
widget/header/src/header.hbs
浏览文件 @ d2064634
{{#this}}
<header data-am-widget="header"
class="am-header{{#if theme}} am-header-{{theme}}{{else}} am-header-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}"{{#if id}}
class="am-header{{#if theme}} am-header-{{theme}}{{else}} am-header-default{{/if}}{{#if options.fixed}} am-header-fixed{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}"{{#if id}}
id="{{id}}"{{/if}}>
{{#if content.left}}
<div class="am-header-left am-header-nav">
......
widget/header/src/header.js
浏览文件 @ d2064634
define(function(require, exports, module) {
var $ = window.Zepto;
});
\ No newline at end of file
function headerInit() {
$('[data-am-widget="header"]').each(function() {
if ($(this).hasClass('am-header-fixed')) {
$('body').addClass('am-with-fixed-header');
return false;
}
});
}
$(function() {
headerInit();
});
exports.init = headerInit;
});
widget/header/src/header.less
浏览文件 @ d2064634
.am-header {
@am-header-height: 49px;
@am-header-height: 49px;
.am-header {
position: relative;
width: 100%;
height: @am-header-height;
......@@ -46,4 +46,20 @@
.hook-am-header;
}
.hook-am-header() {}
\ No newline at end of file
.am-header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: @z-index-header-fixed;
.hook-am-header-fixed;
}
.am-with-fixed-header {
padding-top: @am-header-height;
}
.hook-am-header() {}
.hook-am-header-fixed() {}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或