Amaze UI 3.0 建议反馈帖

最愛大表哥 回复了问题 • 35 人关注 • 52 个回复 • 8422 次浏览 • 6 天前 • 来自相关话题

干货分享丨W3C标准专家解读HTML5未来新动向

AmazeUI 发表了文章 • 1 个评论 • 488 次浏览 • 2016-09-28 10:09 • 来自相关话题

昨天,在北京中关村举办了一场关于HTML5的沙龙,我们邀请到了W3C前端技术专家吴小倩为大家分享前端技术以及HTML5未来的发展。首先,先说明一下W3C的性质,很多人都对W3C或多或少有些误解。W3C 并不 “生产” 标准。... W3C 以工作组的方式,把某项技术的相关各方聚集起来,最终由他们来产出标准。当然,W3C 并不是一个纯粹的观察者:它设定了整个平台的规则,监督整个进程.W3C的规范从最初的草案拟定,到最终的诞生,是一个漫长的过程,而且最终的确定发布,是需要互联网之父Tim Berners-Lee来拍板确定才行。W3C规范生命周期进度:工作草案(WD)→候选推荐标准(CR)→提案推荐标准(PR)→W3C推荐标准(REC) (W3C规范生命周期图)一、HTML5新进展在今年HTML5.1将进入PR阶段(提案推荐标准)在HTML第5版的基础上,HTML5.1会增加内联元素,以及样式和脚本的其他规范。新元素更符合开发者使用习惯,一些能够对应用开发提供帮助的新特性不断被添加进来,包含:改善视频字幕改善快速寻优(fast seeking)更好的forms属性,包括input、autocomplete等拼写检查更好的图像可访问性更强大的、用于嵌入文档的iframes在明年HTML5.2也将进入FPWD阶段(工作草案阶段)最终为大家呈现的是一个可依赖,可读,可懂,可验证,可用的 HTML5点击查看目前HTML5.1兼容性报告现场PPT分享涵盖Web性能优化Houdini 深层革新CSSW3C Web Platform TestsW3C工作组加入方式点击查看完整PPT 昨天,在北京中关村举办了一场关于HTML5的沙龙,我们邀请到了W3C前端技术专家吴小倩为大家分享前端技术以及HTML5未来的发展。首先,先说明一下W3C的性质,很多人都对W3C或多或少有些误解。W3C 并不 “生产” 标准。... W3C 以工作组的方式,把某项技术的相关各方聚集起来,最终由他们来产出标准。当然,W3C 并不是一个纯粹的观察者:它设定了整个平台的规则,监督整个进程. W3C的规范从最初的草案拟定,到最终的诞生,是一个漫长的过程,而且最终的确定发布,是需要互联网之父Tim Berners-Lee来拍板确定才行。W3C规范生命周期进度:工作草案(WD)→候选推荐标准(CR)→提案推荐标准(PR)→W3C推荐标准(REC) (W3C规范生命周期图) 一、HTML5新进展在今年HTML5.1将进入PR阶段(提案推荐标准)在HTML第5版的基础上,HTML5.1会增加内联元素,以及样式和脚本的其他规范。新元素更符合开发者使用习惯,一些能够对应用开发提供帮助的新特性不断被添加进来,包含:改善视频字幕改善快速寻优(fast seeking)更好的forms属性,包括input、autocomplete等拼写检查更好的图像可访问性更强大的、用于嵌入文档的iframes在明年HTML5.2也将进入FPWD阶段(工作草案阶段)最终为大家呈现的是一个可依赖,可读,可懂,可验证,可用的 HTML5点击查看目前HTML5.1兼容性报告现场PPT分享涵盖Web性能优化Houdini 深层革新CSSW3C Web Platform TestsW3C工作组加入方式点击查看完整PPT
[ 查看全部 ]
<p>昨天,在北京中关村举办了一场关于HTML5的沙龙,我们邀请到了<strong>W3C前端技术专家吴小倩为大家分享前端技术以及HTML5未来的发展</strong>。</p><p><strong>首先,先说明一下W3C的性质,很多人都对W3C或多或少有些</strong><strong>误解。</strong></p><p><em><u><strong>W3C 并不 &ldquo;生产&rdquo; 标准。... W3C 以工作组的方式,把某项技术的相关各方聚集起来,最终由他们来产出标准。当然,W3C 并不是一个纯粹的观察者:它设定了整个平台的规则,监督整个进程.</strong></u></em></p><p>&nbsp;</p><p>W3C的规范从最初的草案拟定,到最终的诞生,是一个漫长的过程,而且最终的确定发布,是需要<strong>互联网之父Tim Berners-Lee</strong>来拍板确定才行。</p><p><strong>W3C规范生命周期进度:</strong></p><p><strong>工作草案(WD)</strong><strong>&rarr;候选推荐标准(CR)&rarr;提案推荐标准(PR)&rarr;</strong><strong>W3C推荐标准(REC)</strong></p><p>
QQ图片20160927172235.png
</p><p><strong>(W3C规范生命周期图)</strong></p><p>&nbsp;</p><p><strong>一、HTML5新进展</strong></p><p><strong>在今年HTML5.1将进入PR阶段(提案推荐标准)</strong></p><p><strong>在HTML第5版的基础上,HTML5.1会增加内联元素,以及样式和脚本的其他规范。</strong>新元素更符合开发者使用习惯,一些能够对应用开发提供帮助的新特性不断被添加进来,包含:</p><ol><li><p>改善视频字幕</p></li><li><p>改善快速寻优(fast seeking)</p></li><li><p>更好的forms属性,包括input、autocomplete等</p></li><li><p>拼写检查</p></li><li><p>更好的图像可访问性</p></li><li><p>更强大的、用于嵌入文档的iframes</p></li></ol><p><strong>在明年</strong><strong>HTML5.2也将进入FPWD阶段(工作草案阶段)</strong></p><p><strong>最终为大家呈现的是一个</strong></p><p><strong>可依赖,可读,可懂,可验证,可用的 HTML5</strong></p><p><strong><a href="https://w3c.github.io/test-res ... gt%3B点击查看目前HTML5.1兼容性报告</a></strong></p><p><strong>现场PPT分享</strong></p><p>涵盖</p><p>Web性能优化</p><p>Houdini 深层革新CSS</p><p>W3C Web Platform Tests</p><p>W3C工作组加入方式</p><p><a href="https://www.w3.org/2016/Talks/ ... gt%3B点击查看完整PPT</a></p>

【模板中心】 BUG、需求统计收集帖

icecity 回复了问题 • 11 人关注 • 7 个回复 • 1308 次浏览 • 2016-09-20 14:02 • 来自相关话题

HOW TO PLAY WITH AMAZEUI-TOUCH

老配 发表了文章 • 9 个评论 • 2329 次浏览 • 2016-07-27 15:09 • 来自相关话题

全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环境:Win10ATOM : GitHub出的开源的编辑器CMDER : 命令行工具, windows下一个炒鸡好用的神器,点击下载Node.js :官网直接下载最新版安装即可,点击下载基本的配置需求:webpack: 点击下载Gulp - 可选的Amazeui-touchReactnpm:教程查看atom插件安装推荐两个插件:react 语法高亮,缩进,JSX语法识别linter-eslint 实时检查语法webpack安装配置基础的css loaders, style-loader, file-loader和其他配置不谈Babel: 编译ES6、ES7成ES5 : 点击查看hot-loader点击查看webpack-dev-serverESLint : 代码规范,质量检查:点击查看Babel : 根据官方文档配置就好:点击查看教程相关教程1相关教程2相关教程3相关教程4React核心部分当然还是React啦:React解决部分问题方案代码规范最佳实践核心内容:virtual DOMJSXcomponentspropsstatelifecycleeventundirectional data flow以前总结过一些内容:advanced React--含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)Router官方给出足够多的文档和例子来学习和理解router:官方文档官方教程浏览器必须是chrome啦React Developer Tools : 配合react开发Gulp -- 非必选的Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。查看官网阮一峰大神的文章其他教程1其他教程2其他教程3其他教程4其他教程5其他教程6其他教程7browser-sync 配置配置1配置2可以使用USB链接,设置本地服务器端口就可以访问了。sass -- 非必选touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可saas官网saas中文站点saas教程saas指南 :本地安装即可PPT介绍,可以看下过程巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的基于webpack搭建React开发环境的过程,网上一搜一大堆,这里就不做过多的讲解了。咱先看看版本:node --version,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM:npm --version,推荐升级到最新版:npm install npm@latest -g,npm包的管理方式更加扁平化了。让我们荡起双桨下面以一个小例子来讲讲:第一步:构建你的目录结构好了,让我们来瞅一瞅有木有成功:运行webpack-dev-server --progress --colors浏览器打开:127.0.0.1:8100(我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。当然要开发一个完整的项目,现在的东西还远远不够。就酱,完。原文链接 全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环境:Win10ATOM : GitHub出的开源的编辑器CMDER : 命令行工具, windows下一个炒鸡好用的神器,点击下载Node.js :官网直接下载最新版安装即可,点击下载基本的配置需求:webpack: 点击下载Gulp - 可选的Amazeui-touchReactnpm:教程查看atom插件安装推荐两个插件:react 语法高亮,缩进,JSX语法识别linter-eslint 实时检查语法webpack安装配置基础的css loaders, style-loader, file-loader和其他配置不谈Babel: 编译ES6、ES7成ES5 : 点击查看hot-loader 点击查看webpack-dev-serverESLint : 代码规范,质量检查: 点击查看Babel : 根据官方文档配置就好: 点击查看教程相关教程1相关教程2相关教程3相关教程4React核心部分当然还是React啦:React解决部分问题方案代码规范最佳实践核心内容:virtual DOMJSXcomponentspropsstatelifecycleeventundirectional data flow以前总结过一些内容:advanced React --含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)Router官方给出足够多的文档和例子来学习和理解router:官方文档官方教程浏览器必须是chrome啦React Developer Tools  : 配合react开发Gulp -- 非必选的Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。查看官网阮一峰大神的文章其他教程1其他教程2其他教程3其他教程4其他教程5其他教程6其他教程7browser-sync 配置配置1配置2可以使用USB链接,设置本地服务器端口就可以访问了。sass -- 非必选touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可saas官网saas中文站点saas教程saas指南 :本地安装即可PPT介绍,可以看下过程巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的基于webpack搭建React开发环境的过程,网上一搜一大堆,这里就不做过多的讲解了。咱先看看版本:node --version,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM: npm --version,推荐升级到最新版:npm install npm@latest -g,npm包的管理方式更加扁平化了。让我们荡起双桨下面以一个小例子来讲讲:第一步:构建你的目录结构. ├── package.json // npm配置文件 ├── README.md // README ├── webpack.config.js // webpack 配置文件 ├── .babelrc // babel 配置文件 ├── app // 源文件目录 │ ├── entry.js // 作为webpack的入口文件 │ ├── index.html // html │ ├── js // js 目录 │ ├── style // style 目录 │ ├── build // 打包好的文件可以放这里 第二部:安装基本的// 使用CMDER跑这些命令是极好的 npm init // 初始化npm,并且生成package.json npm install --save-dev webpack webpack-dev-server // 下载webpack npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 下载babel npm install --save-dev style-loader css-loader file-loader // 各种加载器 第三部: 配置项目所需:// 将下载好 Amaze UI Touch, React , React DOM npm install --save amazeui-touch react react-dom 第四部: 配置babel// 创建并且配置 .babelrc: touch .babelrc // 配置 { "presets": [ "es2015", "react" ] } 第五部:配置webpack// 各项配置的深入,请详看webpack的文档。 const webpack = require('webpack'); module.exports = { entry: './app/entry.js', // 入口 output: { // 输出 path: './app/dist', filename: 'bundle.js', }, devServer: { // webpack-dev-server inline: true, contentBase: './app', port: 8100, }, resolve: { extensions: ['', '.js', '.jsx'], }, module: { loaders: [ { // 配置babel加载 test: /\.js?$/, exclude: /node_modules/, loader: 'babel', }, { // 配置css加载,用sass的话,就配置sass的加载器就好 test: /\.css$/, loader: 'style-loader!css-loader' }, { // 配置字体文件加载 test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }, ] } }; 第六部:你的第一个项目:entry.js// 引入你的依赖 import React from 'react'; import ReactDOM from 'react-dom'; import 'amazeui-touch/dist/amazeui.touch.min.css'; // 引入打包好的touch的css,也可以直接单独引入模块的css import { Button } from 'amazeui-touch'; // 引入你需要的组件 // 你的第一个组件 class FirstTouch extends React.Component{ render() { return ( <div> <h1>Hello AMAZEUI-TOUCH</h1> <Button>first amazeui-touch touch</Button> </div> ) } }; // 渲染, 当然你还需要一个 html来加载打包好的文件,手动创建一个就好。 ReactDOM.render(<FirstTouch />, document.getElementById('root')); 好了,让我们来瞅一瞅有木有成功:运行 webpack-dev-server --progress --colors 浏览器打开: 127.0.0.1:8100 (我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。当然要开发一个完整的项目,现在的东西还远远不够。就酱,完。原文链接
[ 查看全部 ]
<p>全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。</p><p><strong>环境安装与前期准备</strong></p><p>我的基础环境:</p><ul><li>Win10</li><li>ATOM : GitHub出的开源的编辑器</li><li>CMDER : 命令行工具, windows下一个炒鸡好用的神器,<a href="http://cmder.net/ ">点击下载</a></li><li>Node.js :官网直接下载最新版安装即可,<a href="https://nodejs.org/en/">点击下载</a></li></ul><p>基本的配置需求:</p><ul><li>webpack: <a href="https://webpack.github.io/">点击下载</a></li><li>Gulp - 可选的</li><li>Amazeui-touch</li><li>React</li></ul><p><strong>npm:</strong></p><p><a href="http://www.alloyteam.com/2016/ ... gt%3B教程查看</a></p><p><strong>atom插件安装</strong></p><p>推荐两个插件:</p><ul><li>react 语法高亮,缩进,JSX语法识别</li><li>linter-eslint 实时检查语法</li></ul><p><strong>webpack安装配置</strong></p><ul><li>基础的css loaders, style-loader, file-loader和其他配置不谈</li><li>Babel: 编译ES6、ES7成ES5 : <a href="https://babeljs.io/">点击查看</a></li><li>hot-loader&nbsp;<a href="https://github.com/gaearon/rea ... gt%3B点击查看</a></li><li>webpack-dev-server</li><li>ESLint : 代码规范,质量检查:&nbsp;<a href="https://csspod.com/getting-sta ... gt%3B点击查看</a></li><li>Babel : 根据官方文档配置就好:&nbsp;<a href="https://babeljs.io/docs/setup/ ... gt%3B点击查看</a></li></ul><p><strong>教程</strong></p><ul><li><a href="https://segmentfault.com/a/119 ... gt%3B相关教程1</a></li><li><a href="https://egghead.io/lessons/rea ... gt%3B相关教程2</a></li><li><a href="https://blog.risingstack.com/u ... gt%3B相关教程3</a></li><li><a href="https://edspencer.net/2016/03/ ... gt%3B相关教程4</a></li></ul><p><strong>React</strong></p><p>核心部分当然还是React啦:</p><ul><li><a href="https://facebook.github.io/rea ... t%3Ba href="https://blog.lwxyfer.com/advanced-react/ ">解决部分问题方案</a></li><li><a href="https://github.com/airbnb/java ... gt%3B代码规范</a></li><li><a href="https://blog.risingstack.com/r ... gt%3B最佳实践</a></li></ul><p>核心内容:</p><ul><li>virtual DOM</li><li>JSX</li><li>components</li><li>props</li><li>state</li><li>lifecycle</li><li>event</li><li>undirectional data flow</li></ul><p>以前总结过一些内容:<a href="https://blog.lwxyfer.com/advan ... anced React</a>&nbsp;--含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)</p><p><strong>Router</strong></p><p>官方给出足够多的文档和例子来学习和理解router:</p><p><a href="https://github.com/reactjs/react-router ">官方文档</a><br /><a href="https://github.com/reactjs/rea ... gt%3B官方教程</a></p><p><strong>浏览器</strong></p><ul><li>必须是chrome啦</li><li><a href="https://chrome.google.com/webs ... React Developer Tools </a>&nbsp;: 配合react开发</li></ul><p><strong>Gulp -- 非必选的</strong></p><p>Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。</p><ul><li><a href="http://gulpjs.com/">查看官网</a></li><li><a href="http://javascript.ruanyifeng.c ... gt%3B阮一峰大神的文章</a></li><li><a href="https://css-tricks.com/gulp-fo ... gt%3B其他教程1</a></li><li><a href="https://scotch.io/tutorials/au ... gt%3B其他教程2</a></li><li><a href="https://www.sitepoint.com/intr ... gt%3B其他教程3</a></li><li><a href="https://www.smashingmagazine.c ... gt%3B其他教程4</a></li><li><a href="https://teamtreehouse.com/libr ... gt%3B其他教程5</a></li><li><a href="https://github.com/nimojs/gulp-book">其他教程6</a></li><li><a href="http://www.hubwiz.com/course/5 ... gt%3B其他教程7</a></li></ul><p><strong>browser-sync 配置</strong></p><p><a href="https://addyosmani.com/blog/browser-sync/ ">配置1</a><br /><a href="http://www.vanamco.com/devicelab/">配置2</a></p><p>可以使用USB链接,设置本地服务器端口就可以访问了。</p><p><strong>sass -- 非必选</strong></p><p>touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可</p><ul><li><a href="http://sass-lang.com/">saas官网</a></li><li><a href="http://sass.bootcss.com/">saas中文站点</a></li><li><a href="http://www.w3cplus.com/sassguide/">saas教程</a></li><li><a href="https://github.com/HugoGiraude ... Bsaas指南</a> :本地安装即可</li><li><a href="http://zciwp.github.io/PPT/plu ... 3BPPT介绍</a>,可以看下</li></ul><p><strong>过程</strong></p><p>巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的<strong>基于webpack搭建React开发环境的过程</strong>,网上一搜一大堆,这里就不做过多的讲解了。</p><p>咱先看看版本:<code>node --version</code>,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM:&nbsp;<code>npm --version</code>,推荐升级到最新版:<code>npm install npm@latest -g</code>,npm包的管理方式更加扁平化了。</p><p><strong>让我们荡起双桨</strong></p><p>下面以一个小例子来讲讲:</p><p>第一步:构建你的目录结构</p><pre><code>.
├── package.json // npm配置文件
├── README.md // README
├── webpack.config.js // webpack 配置文件
├── .babelrc // babel 配置文件
├── app // 源文件目录
│ ├── entry.js // 作为webpack的入口文件
│ ├── index.html // html
│ ├── js // js 目录
│ ├── style // style 目录
│ ├── build // 打包好的文件可以放这里
</code></pre><p>第二部:安装基本的</p><pre><code>// 使用CMDER跑这些命令是极好的
npm init // 初始化npm,并且生成package.json
npm install --save-dev webpack webpack-dev-server // 下载webpack
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 下载babel
npm install --save-dev style-loader css-loader file-loader // 各种加载器
</code></pre><p>第三部: 配置项目所需:</p><pre><code>// 将下载好 Amaze UI Touch, React , React DOM
npm install --save amazeui-touch react react-dom
</code></pre><p>第四部: 配置babel</p><pre><code>// 创建并且配置 .babelrc:
touch .babelrc
// 配置
{
"presets": [
"es2015",
"react"
]
}
</code></pre><p>第五部:配置webpack</p><pre><code>// 各项配置的深入,请详看webpack的文档。
const webpack = require('webpack');

module.exports = {
entry: './app/entry.js', // 入口
output: { // 输出
path: './app/dist',
filename: 'bundle.js',
},
devServer: { // webpack-dev-server
inline: true,
contentBase: './app',
port: 8100,
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{ // 配置babel加载
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
},
{ // 配置css加载,用sass的话,就配置sass的加载器就好
test: /\.css$/, loader: 'style-loader!css-loader'
},
{ // 配置字体文件加载
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&amp;.]+)?$/,
loader: 'file-loader'
},
]
}
};
</code></pre><p>第六部:你的第一个项目:entry.js</p><pre><code>// 引入你的依赖
import React from 'react';
import ReactDOM from 'react-dom';

import 'amazeui-touch/dist/amazeui.touch.min.css'; // 引入打包好的touch的css,也可以直接单独引入模块的css
import { Button } from 'amazeui-touch'; // 引入你需要的组件

// 你的第一个组件
class FirstTouch extends React.Component{
render() {
return (
&lt;div&gt;
&lt;h1&gt;Hello AMAZEUI-TOUCH&lt;/h1&gt;
&lt;Button&gt;first amazeui-touch touch&lt;/Button&gt;
&lt;/div&gt;
)
}
};

// 渲染, 当然你还需要一个 html来加载打包好的文件,手动创建一个就好。
ReactDOM.render(&lt;FirstTouch /&gt;, document.getElementById('root'));
</code></pre><p>好了,让我们来瞅一瞅有木有成功:运行&nbsp;<code>webpack-dev-server --progress --colors</code>&nbsp;浏览器打开:&nbsp;<code>127.0.0.1:8100</code>&nbsp;(我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。</p><p>Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。</p><p>当然要开发一个完整的项目,现在的东西还远远不够。</p><p>就酱,完。</p><p><a href="https://blog.lwxyfer.com/how-t ... gt%3B原文链接</a></p>

AmazeUI瘦身全攻略

有明 发表了文章 • 2 个评论 • 1332 次浏览 • 2016-07-20 11:51 • 来自相关话题

前端框架AmazeUI涵盖jQuery,React,Touch三个版本。AmazeUI的组件策略是移动优先,但UI的配置文件体积比较大,在移动开发的过程中50%以上的组件是不会使用的,如何精剪UI的体积,本文和大家一起分享从源代码中精剪体积的策略。1.环境搭建:如果想自定义环境组件,获得更宽松的脚手架策略,当然要搭建环境。Gulp也好,webpack也好。你需要把AmazeUI的源码本地化:下载源码 下载源码后你可以通过npm install 命令安装全部的依赖。Js文件夹和less文件夹是我们主要精剪的目录。2.less文件精剪攻略:less文件夹打开后包含这AmazeUI所依赖的所有css文件。现在你获得的less文件是还没有生成css的源文件。我们后面会谈一下如何生成css文件。让我们先看一下less文件夹中几个关键的文件,也是我们需要精剪的主要部分。2.1 amazeui.less 所有依赖的主文件:打开后会看到很多@import;less样式文件可通过 @import '文件路径'; 引入外部的less文件。值得注意的是不带扩展名或带非.less的扩展名均被视为less文件;@import可出现在任何位置,而不像css的@import那样只能放在文件第一行。另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple),用来改变引入文件的特性。语法为: @import (reference) '文件路径'; 。下面为各配置项的具体说明:@import (reference) "文件路径";将引入的文件作为样式库使用,因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。@import (inline) "文件路径";用于引入与less不兼容的css文件,通过inline配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。注意:引入的文件和当前文件会被编译为一个样式样式@import (less) "文件路径";默认使用该配置项,表示引入的文件为less文件。4. @import (css) "文件路径";表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件5. @import (once) "文件路径";默认使用该配置项,表示对同一个资源仅引入一次。6. @import (multiple) "文件路径";表示对同一资源可引入多次。了解@import后在看amazeui.less文件就能理解了吧,在AmazeUI没有封装前每一个组件都是单独的less文件组成,通过封装把所有配置的文件组成了我们用的 amazeui.css或经过压缩后成为我们使用的 amazeui.min.css2.2 variables.less 文件这个文件是整个amazeui.css中的配置文件,涉及到所有颜色,字体,文字大小。媒体查询等很多方面:色调可以通过下图位置来更改: 还有许多可以更改的常量,官方已经分别做了注释,找到你要更改的环境常量释放你的设计天赋吧。2.3 lessc 封装更改后的的less文件安装 npm install lessc即可安装封装也很简单,可以直接通过命令行:lessc –x /开发环境/amazeui.less /生产环境/amazeui.css你也可以通过gulp等自动任务完成所有的封装。3、js文件攻略Js文件的封装和less文件策略很类似。建议通过:npm install amazeui命令部署amazeui这样在js文件夹下你会获得一个amazeui.js的文件。这里封装这所有amazeui中js所有依赖的模块关系,不难看出widget文件夹封装的是js组件。这些组件的依赖关系也涉及到amazeui的css文件,精剪的时候要要对症下药。把不需要的直接删除即可,然后通过命令行统一封装:browserify -r /开发环境/amazeui.js:UI >/生产环境/amazeui.js生成的js文件是没有被压缩的,你可以通过手动压缩,或uglifyjs进行压缩处理:uglifyjs amazeui.js -m -o amazeui.min.js当然笔者这里提供的方法是依赖于第三方的工具,你也可以统一用gulp或webpack来建立自己的开发环境。 前端框架AmazeUI涵盖jQuery,React,Touch三个版本。AmazeUI的组件策略是移动优先,但UI的配置文件体积比较大,在移动开发的过程中50%以上的组件是不会使用的,如何精剪UI的体积,本文和大家一起分享从源代码中精剪体积的策略。1.环境搭建:如果想自定义环境组件,获得更宽松的脚手架策略,当然要搭建环境。Gulp也好,webpack也好。你需要把AmazeUI的源码本地化:下载源码 下载源码后你可以通过npm install 命令安装全部的依赖。Js文件夹和less文件夹是我们主要精剪的目录。2.less文件精剪攻略:less文件夹打开后包含这AmazeUI所依赖的所有css文件。现在你获得的less文件是还没有生成css的源文件。我们后面会谈一下如何生成css文件。让我们先看一下less文件夹中几个关键的文件,也是我们需要精剪的主要部分。2.1 amazeui.less 所有依赖的主文件:打开后会看到很多@import;less样式文件可通过 @import '文件路径'; 引入外部的less文件。值得注意的是不带扩展名或带非.less的扩展名均被视为less文件;@import可出现在任何位置,而不像css的@import那样只能放在文件第一行。另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple),用来改变引入文件的特性。语法为:  @import (reference) '文件路径'; 。下面为各配置项的具体说明:@import (reference) "文件路径";将引入的文件作为样式库使用,因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。@import (inline) "文件路径";用于引入与less不兼容的css文件,通过inline配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。注意:引入的文件和当前文件会被编译为一个样式样式@import (less) "文件路径";默认使用该配置项,表示引入的文件为less文件。4. @import (css) "文件路径";表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件5. @import (once) "文件路径";默认使用该配置项,表示对同一个资源仅引入一次。6. @import (multiple) "文件路径";表示对同一资源可引入多次。了解@import后在看amazeui.less文件就能理解了吧,在AmazeUI没有封装前每一个组件都是单独的less文件组成,通过封装把所有配置的文件组成了我们用的 amazeui.css或经过压缩后成为我们使用的 amazeui.min.css2.2 variables.less 文件这个文件是整个amazeui.css中的配置文件,涉及到所有颜色,字体,文字大小。媒体查询等很多方面:色调可以通过下图位置来更改: 还有许多可以更改的常量,官方已经分别做了注释,找到你要更改的环境常量释放你的设计天赋吧。2.3 lessc 封装更改后的的less文件安装 npm install lessc即可安装封装也很简单,可以直接通过命令行:lessc –x  /开发环境/amazeui.less  /生产环境/amazeui.css你也可以通过gulp等自动任务完成所有的封装。3、js文件攻略Js文件的封装和less文件策略很类似。建议通过:npm install amazeui命令部署amazeui这样在js文件夹下你会获得一个amazeui.js的文件。这里封装这所有amazeui中js所有依赖的模块关系,不难看出widget文件夹封装的是js组件。这些组件的依赖关系也涉及到amazeui的css文件,精剪的时候要要对症下药。把不需要的直接删除即可,然后通过命令行统一封装:browserify -r /开发环境/amazeui.js:UI >/生产环境/amazeui.js生成的js文件是没有被压缩的,你可以通过手动压缩,或uglifyjs进行压缩处理:uglifyjs amazeui.js  -m -o amazeui.min.js当然笔者这里提供的方法是依赖于第三方的工具,你也可以统一用gulp或webpack来建立自己的开发环境。
[ 查看全部 ]
<p>前端框架AmazeUI涵盖jQuery,React,Touch三个版本。AmazeUI的组件策略是移动优先,但UI的配置文件体积比较大,在移动开发的过程中50%以上的组件是不会使用的,如何精剪UI的体积,本文和大家一起分享从源代码中精剪体积的策略。</p><p><strong>1.环境搭建:</strong></p><p>如果想自定义环境组件,获得更宽松的脚手架策略,当然要搭建环境。Gulp也好,webpack也好。你需要把AmazeUI的源码本地化:下载源码</p><p>
1.png
</p><p>下载源码后你可以通过npm install 命令安装全部的依赖。Js文件夹和less文件夹是我们主要精剪的目录。</p><p><strong>2.less文件精剪攻略:</strong></p><p>less文件夹打开后包含这AmazeUI所依赖的所有css文件。现在你获得的less文件是还没有生成css的源文件。我们后面会谈一下如何生成css文件。让我们先看一下less文件夹中几个关键的文件,也是我们需要精剪的主要部分。</p><p>2.1 amazeui.less 所有依赖的主文件:</p><p>打开后会看到很多@import;less样式文件可通过 @import &#39;文件路径&#39;; 引入外部的less文件。值得注意的是不带扩展名或带非.less的扩展名均被视为less文件;</p><p>@import可出现在任何位置,而不像css的@import那样只能放在文件第一行。</p><p>另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple),用来改变引入文件的特性。语法为:&nbsp; @import (reference) &#39;文件路径&#39;; 。下面为各配置项的具体说明:</p><ul><li>@import (reference) &quot;文件路径&quot;;</li></ul><p>将引入的文件作为样式库使用,因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。</p><ul><li>@import (inline) &quot;文件路径&quot;;</li></ul><p>用于引入与less不兼容的css文件,通过inline配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。注意:引入的文件和当前文件会被编译为一个样式样式</p><ul><li>@import (less) &quot;文件路径&quot;;</li></ul><p>默认使用该配置项,表示引入的文件为less文件。</p><ul><li>4. @import (css) &quot;文件路径&quot;;</li></ul><p>表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件</p><ul><li>5. @import (once) &quot;文件路径&quot;;</li></ul><p>默认使用该配置项,表示对同一个资源仅引入一次。</p><ul><li>6. @import (multiple) &quot;文件路径&quot;;</li></ul><p>表示对同一资源可引入多次。</p><p>了解@import后在看amazeui.less文件就能理解了吧,在AmazeUI没有封装前每一个组件都是单独的less文件组成,通过封装把所有配置的文件组成了我们用的 amazeui.css或经过压缩后成为我们使用的 amazeui.min.css</p><p><strong>2.2 variables.less 文件</strong></p><p>这个文件是整个amazeui.css中的配置文件,涉及到所有颜色,字体,文字大小。媒体查询等很多方面:</p><p>色调可以通过下图位置来更改:</p><p>
2.png
</p><p>还有许多可以更改的常量,官方已经分别做了注释,找到你要更改的环境常量释放你的设计天赋吧。</p><p><strong>2.3 lessc 封装更改后的的less文件</strong></p><ul><li>安装 npm install lessc即可安装</li><li>封装也很简单,可以直接通过命令行:</li><li>lessc &ndash;x &nbsp;/开发环境/amazeui.less &nbsp;/生产环境/amazeui.css</li><li>你也可以通过gulp等自动任务完成所有的封装。</li></ul><p><strong>3、js文件攻略</strong></p><p>Js文件的封装和less文件策略很类似。建议通过:npm install amazeui命令部署amazeui这样在js文件夹下你会获得一个amazeui.js的文件。这里封装这所有amazeui中js所有依赖的模块关系,不难看出widget文件夹封装的是js组件。这些组件的依赖关系也涉及到amazeui的css文件,精剪的时候要要对症下药。把不需要的直接删除即可,然后通过命令行统一封装:</p><p>browserify -r /开发环境/amazeui.js:UI &gt;/生产环境/amazeui.js</p><p>生成的js文件是没有被压缩的,你可以通过手动压缩,或uglifyjs进行压缩处理:</p><p>uglifyjs amazeui.js&nbsp; -m -o amazeui.min.js</p><p>当然笔者这里提供的方法是依赖于第三方的工具,你也可以统一用gulp或webpack来建立自己的开发环境。</p>

自定义AmazeUI的图标

jeeplin 发表了文章 • 2 个评论 • 1588 次浏览 • 2016-07-19 09:53 • 来自相关话题

AmazeUI是国内比较出名一款UI应用,提到UI就有很多小图标,AmazeUI官方发布了很多个小图标。详见:http://amazeui.org/css/icon但一些特殊的场景,美工妹妹会设计很多AmazeUI中没有的图标。而且会经常被使用。本文探讨我们如何把一些把这些图标导入到AmazeUI的图标库中使用?当然如果你想用img标签来引入可以跳过这个教程了。AmazeUI的图标引入方式:下载官方安装包:下载地址-/assets/fonts目录文件夹下就存放这所有已经编辑压缩好的图标库。新手朋友很多有点迷茫,这到底是什么东东呢?其实这些图标我们可以成为字体图标,如果把每一个汉字看成一个图标。那么相对的字体库就是图标集。我们只要把设计好的图标变成字体文件。引入到这些字体库中即可。先看看这些字体库的格式:FontAwesome.otf => OpenType - TrueType 字体, 采用的是 TrueType 曲线, 不过支持 OpenType 的高级特性fontawesome-webfont.eot =>eot字库fontawesome-webfont.svg => 矢量字体图标库fontawesome-webfont.ttf => TrueType 字体, 采用的是 TrueType 曲线, 不支持 OpenType 特性.fontawesome-webfont.woff => Web Open Font Format,简称WOFFfontawesome-webfont.woff2 => woff2新格式的字体图标库你可以通过一些软件打开这些字体库,例如:svg图标你可以通过图标管理进行管理。添加或修改AmazeUI图标文件1、打开ttf文件:推荐使用微软官方的产品:Font Creator Program下载地址:Font Creator Program 2、运行 FCP4.EXT 3、点击文件—>打开—>字体文件—>(选择amazeui的asset/font/fontawesome-webfont.ttf) 打开后会看到很多字体图标文件,当然这就是我们对应与amazeui的图标文件。例如我们看到的第一个图标文件glass,对应的amazeui文件就是<i class="am-icon-glass "></i>4、为了更清楚直观的看到css文件的操作,我们打开 amazeui.css文件。跳到第4707行 我们会看到我们定义的样式am-icon-glass befor这个伪类意思是指在这个样式之前插入,那对应/f000是指什么呢?邮件单击FCP4中的图标,点击“属性”à映射,有一个值和字符名称就找到了我们要找到/f000 5、知道这些后,我们就可以双击图标进行修改,或者插入-->字模,来创建字体,然后在css上配置字体的值即可在网页中显示字体。温馨提示:你可以直接通过ai软件复制矢量图标到FCP4是相当方便的方式。6、还有其他格式的文件,大家可以通过一些在线的转换工具进行转换推荐给大家:http://www.font2web.com/ 上传ttf字体,点击convert&download 即可转换成amazeui的6种字体了。 AmazeUI是国内比较出名一款UI应用,提到UI就有很多小图标,AmazeUI官方发布了很多个小图标。详见:http://amazeui.org/css/icon但一些特殊的场景,美工妹妹会设计很多AmazeUI中没有的图标。而且会经常被使用。本文探讨我们如何把一些把这些图标导入到AmazeUI的图标库中使用?当然如果你想用img标签来引入可以跳过这个教程了。 AmazeUI的图标引入方式:下载官方安装包:下载地址-/assets/fonts目录文件夹下就存放这所有已经编辑压缩好的图标库。新手朋友很多有点迷茫,这到底是什么东东呢?其实这些图标我们可以成为字体图标,如果把每一个汉字看成一个图标。那么相对的字体库就是图标集。我们只要把设计好的图标变成字体文件。引入到这些字体库中即可。先看看这些字体库的格式:FontAwesome.otf => OpenType - TrueType 字体, 采用的是 TrueType 曲线, 不过支持 OpenType 的高级特性fontawesome-webfont.eot =>eot字库fontawesome-webfont.svg => 矢量字体图标库fontawesome-webfont.ttf => TrueType 字体, 采用的是 TrueType 曲线, 不支持 OpenType 特性.fontawesome-webfont.woff => Web Open Font Format,简称WOFFfontawesome-webfont.woff2 => woff2新格式的字体图标库你可以通过一些软件打开这些字体库,例如:svg图标你可以通过图标管理进行管理。 添加或修改AmazeUI图标文件1、打开ttf文件:推荐使用微软官方的产品:Font Creator Program下载地址:Font Creator Program 2、运行 FCP4.EXT 3、点击文件—>打开—>字体文件—>(选择amazeui的asset/font/fontawesome-webfont.ttf) 打开后会看到很多字体图标文件,当然这就是我们对应与amazeui的图标文件。例如我们看到的第一个图标文件glass,对应的amazeui文件就是<i class="am-icon-glass "></i> 4、为了更清楚直观的看到css文件的操作,我们打开 amazeui.css文件。跳到第4707行 我们会看到我们定义的样式am-icon-glass befor这个伪类意思是指在这个样式之前插入,那对应/f000是指什么呢?邮件单击FCP4中的图标,点击“属性”à映射,有一个值和字符名称就找到了我们要找到/f000 5、知道这些后,我们就可以双击图标进行修改,或者插入-->字模,来创建字体,然后在css上配置字体的值即可在网页中显示字体。温馨提示:你可以直接通过ai软件复制矢量图标到FCP4是相当方便的方式。6、还有其他格式的文件,大家可以通过一些在线的转换工具进行转换推荐给大家:http://www.font2web.com/ 上传ttf字体,点击convert&download 即可转换成amazeui的6种字体了。
[ 查看全部 ]
<p>AmazeUI是国内比较出名一款UI应用,提到UI就有很多小图标,AmazeUI官方发布了很多个小图标。详见:http://amazeui.org/css/icon</p><p>但一些特殊的场景,美工妹妹会设计很多AmazeUI中没有的图标。而且会经常被使用。本文探讨我们如何把一些把这些图标导入到AmazeUI的图标库中使用?当然如果你想用img标签来引入可以跳过这个教程了。</p><p>&nbsp;</p><p><strong>AmazeUI的图标引入方式:</strong></p><p>下载官方安装包:<a href="http://cdn.amazeui.org/amazeui ... gt%3B下载地址</a>-/assets/fonts</p><p>目录文件夹下就存放这所有已经编辑压缩好的图标库。新手朋友很多有点迷茫,这到底是什么东东呢?其实这些图标我们可以成为字体图标,如果把每一个汉字看成一个图标。那么相对的字体库就是图标集。我们只要把设计好的图标变成字体文件。引入到这些字体库中即可。</p><p>先看看这些字体库的格式:</p><p>FontAwesome.otf =&gt; OpenType - TrueType 字体, 采用的是 TrueType 曲线, 不过支持 OpenType 的高级特性</p><p>fontawesome-webfont.eot =&gt;eot字库</p><p>fontawesome-webfont.svg =&gt; 矢量字体图标库</p><p>fontawesome-webfont.ttf =&gt; TrueType 字体, 采用的是 TrueType 曲线, 不支持 OpenType 特性.</p><p>fontawesome-webfont.woff =&gt; Web Open Font Format,简称WOFF</p><p>fontawesome-webfont.woff2 =&gt; woff2新格式的字体图标库</p><p>你可以通过一些软件打开这些字体库,</p><p>例如:svg图标你可以通过<a href="https://icomoon.io/app/#/select">图标管理</a>进行管理。</p><p>&nbsp;</p><p><strong>添加或修改AmazeUI图标文件</strong></p><p>1、打开ttf文件:推荐使用微软官方的产品:Font Creator Program</p><p>下载地址:<a href="http://www.pc6.com/softview/So ... BFont Creator Program</a><br />
1.png
</p><p><!--[if gte vml 1]><v:shapetype id="_x0000_t75"
coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"
filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="图片_x0020_1" o:spid="_x0000_i1029" type="#_x0000_t75"
style='width:330.75pt;height:184.5pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\ad\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png"
o:title="G@43A6V%[_V9AQ((WX$R$R6"/>
</v:shape><![endif]--></p><p>2、运行 FCP4.EXT</p><p>
2.png
</p><p><!--[if gte vml 1]><v:shape
id="图片_x0020_2" o:spid="_x0000_i1028" type="#_x0000_t75" style='width:347.25pt;
height:183pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\ad\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png"
o:title=""/>
</v:shape><![endif]--></p><p>3、点击文件&mdash;&gt;打开&mdash;&gt;字体文件&mdash;&gt;(选择amazeui的asset/font/fontawesome-webfont.ttf)</p><p>
3.png
<br />打开后会看到很多字体图标文件,当然这就是我们对应与amazeui的图标文件。例如我们看到的第一个图标文件glass,对应的amazeui文件就是</p><p><!--[if gte vml 1]><v:shape
id="图片_x0020_3" o:spid="_x0000_i1027" type="#_x0000_t75" style='width:351.75pt;
height:185.25pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\ad\AppData\Local\Temp\msohtmlclip1\01\clip_image005.png"
o:title=""/>
</v:shape><![endif]--></p><p>&lt;i class=&quot;am-icon-glass &quot;&gt;&lt;/i&gt;</p><p>&nbsp;</p><p>4、为了更清楚直观的看到css文件的操作,我们打开 amazeui.css文件。跳到第4707行</p><p>
5.png
<br />我们会看到我们定义的样式<strong>am-icon-glass</strong> befor这个伪类意思是指在这个样式之前插入,那对应/f000是指什么呢?</p><p><!--[if gte vml 1]><v:shape id="图片_x0020_4"
o:spid="_x0000_i1026" type="#_x0000_t75" style='width:462.75pt;height:402.75pt;
visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\ad\AppData\Local\Temp\msohtmlclip1\01\clip_image007.png"
o:title="$9P697J@1V0N6Z7V2[DFY(B"/>
</v:shape><![endif]--></p><p>邮件单击FCP4中的图标,点击&ldquo;属性&rdquo;&agrave;映射,有一个值和字符名称就找到了我们要找到/f000</p><p>
1.png
<br />5、知道这些后,我们就可以双击图标进行修改,或者插入--&gt;字模,来创建字体,然后在css上配置字体的值即可在网页中显示字体。温馨提示:你可以直接通过ai软件复制矢量图标到FCP4是相当方便的方式。</p><p><!--[if gte vml 1]><v:shape
id="图片_x0020_6" o:spid="_x0000_i1025" type="#_x0000_t75" style='width:415.5pt;
height:235.5pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\ad\AppData\Local\Temp\msohtmlclip1\01\clip_image008.png"
o:title=""/>
</v:shape><![endif]--></p><p>6、还有其他格式的文件,大家可以通过一些在线的转换工具进行转换</p><p>推荐给大家:http://www.font2web.com/ 上传ttf字体,点击convert&amp;download 即可转换成amazeui的6种字体了。</p>

浅谈基于AmazeUI Touch 的 Flex布局结构

夜店小新新 发表了文章 • 2 个评论 • 759 次浏览 • 2016-07-18 10:04 • 来自相关话题

2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。让我们看看AmazeUI的布局是怎么选择的:Amaze UI Web基于 float,12 列响应式Amaze UI Touch 基于flex,6 列流式很多AmazeUI的程序员在使用Touch系统进行架构的时候,往往忽略了Flex的布局,很多浏览器的兼容问题就会出现了。值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,容器的六大属性1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2、flex-wrap:默认情况下,元素都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。4、justify-content:属性定义了项目在主轴上的对齐方式。 5、align-items:属性定义项目在交叉轴上如何对齐flex-start:顶边对齐。flex-end:底边对其。center:水平居中。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。同时在排列上也有6个属性来对项目进行分析。1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 让我们看看AmazeUI的布局是怎么选择的:Amaze UI Web基于 float,12 列响应式Amaze UI Touch 基于flex,6 列流式很多AmazeUI的程序员在使用Touch系统进行架构的时候,往往忽略了Flex的布局,很多浏览器的兼容问题就会出现了。值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,容器的六大属性1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2、flex-wrap:默认情况下,元素都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。4、justify-content:属性定义了项目在主轴上的对齐方式。 5、align-items:属性定义项目在交叉轴上如何对齐flex-start:顶边对齐。flex-end:底边对其。center:水平居中。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。同时在排列上也有6个属性来对项目进行分析。1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。
[ 查看全部 ]
<p>2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为&quot;弹性布局&quot;,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。</p><pre><code class="language-css">.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
</code></pre><p>让我们看看AmazeUI的布局是怎么选择的:</p><ul><li>Amaze UI Web基于 float,12 列响应式</li><li>Amaze UI Touch 基于flex,6 列流式</li></ul><p><strong>很多AmazeUI</strong><strong>的程序员在使用Touch</strong><strong>系统进行架构的时候,往往忽略了Flex</strong><strong>的布局,很多浏览器的兼容问题就会出现了。</strong>值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。</p><p>采用Flex布局的元素,称为Flex容器(flex container),简称&quot;容器&quot;。它的所有子元素自动成为容器成员,容器的六大属性</p><p>1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值</p><ul><li>row(默认值):主轴为水平方向,起点在左端。</li><li>row-reverse:主轴为水平方向,起点在右端。</li><li>column:主轴为垂直方向,起点在上沿。</li><li>column-reverse:主轴为垂直方向,起点在下沿。</li></ul><p>2、flex-wrap:默认情况下,元素都排在一条线(又称&quot;轴线&quot;)上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。</p><ul><li>nowrap(默认):不换行。</li><li>wrap:换行,第一行在上方。</li><li>wrap-reverse:换行,第一行在下方。</li></ul><p>3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。</p><p>4、justify-content:属性定义了项目在主轴上的对齐方式。<br />
1.png
</p><p>5、align-items:属性定义项目在交叉轴上如何对齐</p><ul><li>flex-start:顶边对齐。</li><li>flex-end:底边对其。</li><li>center:水平居中。</li><li>baseline: 项目的第一行文字的基线对齐。</li><li>stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。</li></ul><p>6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。</p><ul><li>flex-start:与交叉轴的起点对齐。</li><li>flex-end:与交叉轴的终点对齐。</li><li>center:与交叉轴的中点对齐。</li><li>space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。</li><li>space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。</li><li>stretch(默认值):轴线占满整个交叉轴。</li></ul><p>同时在排列上也有6个属性来对项目进行分析。</p><p>1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。</p><p>2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。</p><p>3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。</p><p>4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。</p><p>5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。</p><p>6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。</p><p>当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。</p>

关于表单验证和ajax提交结合的一个解决方案

zp522123428 发表了文章 • 2 个评论 • 642 次浏览 • 2016-07-15 11:38 • 来自相关话题

看到有很多人在问妹子的验证和ajax提交结合的问题。翻了半天也没找到比较好的解决方案。正好自己也在弄。想了下。目前以下这个解决方案比较简单优雅一点。不喜勿喷。。。。。。。。。。。1、form 加上onsubmit="return false;禁用自动提交2、延迟几毫秒去验证页面css样式是否有错误提示的样式。3、根据情况ajax提交或者不做操作 看到有很多人在问妹子的验证和ajax提交结合的问题。翻了半天也没找到比较好的解决方案。正好自己也在弄。想了下。目前以下这个解决方案比较简单优雅一点。 不喜勿喷。。。。。。。。。。。 1、form 加上onsubmit="return false;禁用自动提交2、延迟几毫秒去验证页面css样式是否有错误提示的样式。3、根据情况ajax提交或者不做操作 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ page pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <%@ include file="/WEB-INF/view/common/head.jsp"%> </head> <!--[if lte IE 9]> <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a> 以获得更好的体验!</p> <![endif]--> <body> <!-- content start --> <div class="admin-content"> <div class="admin-content-body"> <div class="am-cf am-padding am-padding-bottom-0"> <hr> </div> <div class="am-g"> <div class="am-u-sm-12 am-u-md-10"> <form class="am-form am-form-horizontal" id="form" data-am-validator onsubmit="return false;"> <fieldset> <div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 所属城市 / city</label> <div class="am-u-sm-9"> <input type="text" id="city" name="city" placeholder="所属城市/ city" required> </div> </div> <div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 所属区域 / area</label> <div class="am-u-sm-9"> <input type="text" id="area" name="area" placeholder="所属区域/ area"> </div> </div> <div class="am-form-group"> <div class="am-u-sm-9 am-u-sm-push-3"> <button type="submit" onclick="submitDo();" class="am-btn am-btn-primary">保存</button> </div> </div> </fieldset> </form> </div> </div> </div> <%@ include file="/WEB-INF/view/common/footer.jsp"%> </div> <!-- content end --> <script type="text/javascript"> function submitDo() { setTimeout("ajaxDo()",10); } function ajaxDo(){ if($("#form .am-field-error").size()!=0){ return false; } var data = $("#form").serialize(); data = decodeURIComponent(data, true); $.ajax({ url : "edit", data : data, method : 'post', contentType : 'application/x-www-form-urlencoded', encoding : 'UTF-8', cache : false, success : function(result) { if (result.success) { layer.msg('保存成功'); setTimeout("closeWindow()", 1000); } else { layer.msg('保存失败'); } }, error : function() { layer.msg('系统异常'); } }); } </script> </body> </html>  
[ 查看全部 ]
<p>看到有很多人在问妹子的验证和ajax提交结合的问题。</p><p>翻了半天也没找到比较好的解决方案。</p><p>正好自己也在弄。想了下。目前以下这个解决方案比较简单优雅一点。</p><p>&nbsp;</p><p>不喜勿喷。。。。。。。。。。。</p><p>&nbsp;</p><p>1、form 加上onsubmit=&quot;return false;禁用自动提交</p><p>2、延迟几毫秒去验证页面css样式是否有错误提示的样式。</p><p>3、根据情况ajax提交或者不做操作</p><p>&nbsp;</p><pre><code class="language-javascript">&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
&lt;%@ page pageEncoding="UTF-8"%&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;%@ include file="/WEB-INF/view/common/head.jsp"%&gt;
&lt;/head&gt;
&lt;!--[if lte IE 9]&gt;
&lt;p class="browsehappy"&gt;你正在使用&lt;strong&gt;过时&lt;/strong&gt;的浏览器,Amaze UI 暂不支持。 请 &lt;a href="http://browsehappy.com/" target="_blank"&gt;升级浏览器&lt;/a&gt;
以获得更好的体验!&lt;/p&gt;
&lt;![endif]--&gt;
&lt;body&gt;
&lt;!-- content start --&gt;
&lt;div class="admin-content"&gt;
&lt;div class="admin-content-body"&gt;
&lt;div class="am-cf am-padding am-padding-bottom-0"&gt;
&lt;hr&gt;
&lt;/div&gt;
&lt;div class="am-g"&gt;
&lt;div class="am-u-sm-12 am-u-md-10"&gt;
&lt;form class="am-form am-form-horizontal" id="form" data-am-validator onsubmit="return false;"&gt;
&lt;fieldset&gt;
&lt;div class="am-form-group"&gt;
&lt;label for="user-name" class="am-u-sm-3 am-form-label"&gt; 所属城市
/ city&lt;/label&gt;
&lt;div class="am-u-sm-9"&gt;
&lt;input type="text" id="city" name="city"
placeholder="所属城市/ city" required&gt;
&lt;/div&gt;
&lt;/div&gt;


&lt;div class="am-form-group"&gt;
&lt;label for="user-name" class="am-u-sm-3 am-form-label"&gt; 所属区域
/ area&lt;/label&gt;
&lt;div class="am-u-sm-9"&gt;
&lt;input type="text" id="area" name="area"
placeholder="所属区域/ area"&gt;
&lt;/div&gt;
&lt;/div&gt;


&lt;div class="am-form-group"&gt;
&lt;div class="am-u-sm-9 am-u-sm-push-3"&gt;
&lt;button type="submit" onclick="submitDo();"
class="am-btn am-btn-primary"&gt;保存&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;%@ include file="/WEB-INF/view/common/footer.jsp"%&gt;
&lt;/div&gt;
&lt;!-- content end --&gt;
&lt;script type="text/javascript"&gt;
function submitDo() {
setTimeout("ajaxDo()",10);
}
function ajaxDo(){
if($("#form .am-field-error").size()!=0){
return false;
}
var data = $("#form").serialize();
data = decodeURIComponent(data, true);
$.ajax({
url : "edit",
data : data,
method : 'post',
contentType : 'application/x-www-form-urlencoded',
encoding : 'UTF-8',
cache : false,
success : function(result) {
if (result.success) {
layer.msg('保存成功');
setTimeout("closeWindow()", 1000);
} else {
layer.msg('保存失败');
}
},
error : function() {
layer.msg('系统异常');
}
});
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><p>&nbsp;</p>

【怎么解决】时间选择框清空后 再进行选择后输入框无法显示时间

wos 回复了问题 • 4 人关注 • 2 个回复 • 700 次浏览 • 2016-05-30 13:50 • 来自相关话题

【你问你答】Amaze UI组件大赛知多少?

itknight 回复了问题 • 9 人关注 • 8 个回复 • 1784 次浏览 • 2016-05-23 09:19 • 来自相关话题

【文档系统】PESCMS DOC 1.2.7正式发布

qiangzi_1 回复了问题 • 6 人关注 • 2 个回复 • 1326 次浏览 • 2016-04-01 10:09 • 来自相关话题

【组件设计稿】3.25更新 Amaze UI WEB组件 PSD AI 格式下载

无宿游魂 回复了问题 • 13 人关注 • 7 个回复 • 1712 次浏览 • 2017-03-03 00:02 • 来自相关话题