Amaze UI Web

Amaze UI Web

Amaze UI 3.0 建议反馈帖

逝水无痕 回复了问题 • 31 人关注 • 50 个回复 • 6301 次浏览 • 6 天前 • 来自相关话题

icon样式中有没有扫一扫的样式

回复

MakeTan 发起了问题 • 1 人关注 • 0 个回复 • 40 次浏览 • 2017-07-12 11:20 • 来自相关话题

妹子ui使用百度编辑器下拉菜单无法显示

糯米 回复了问题 • 3 人关注 • 3 个回复 • 289 次浏览 • 2017-06-20 00:10 • 来自相关话题

请问如何取消默认的webapp

回复

狡猾的蜂窝煤 发起了问题 • 1 人关注 • 0 个回复 • 66 次浏览 • 2017-06-12 09:52 • 来自相关话题

希望amazeui出vuejs版本的,结合webpack一起用!

landon 回复了问题 • 5 人关注 • 4 个回复 • 4405 次浏览 • 2017-05-17 10:23 • 来自相关话题

为什么安卓手机侧边框显示正常,但是iPhone就怎么按都不会弹出侧边框

54cto 回复了问题 • 4 人关注 • 2 个回复 • 456 次浏览 • 2017-05-08 16:32 • 来自相关话题

技术群满呐!! 可否扩容呢??

回复

jc_迟早 发起了问题 • 1 人关注 • 0 个回复 • 101 次浏览 • 2017-05-03 18:17 • 来自相关话题

关于amazeUI有活跃的群吗?

回复

jc_迟早 发起了问题 • 1 人关注 • 0 个回复 • 233 次浏览 • 2017-04-17 17:41 • 来自相关话题

请问妹子UI有没有这样的样式

糯米 回复了问题 • 2 人关注 • 1 个回复 • 303 次浏览 • 2017-04-13 14:49 • 来自相关话题

amaze 使用哪个版本的jquery,谢谢。

Amaze UI 小无 回复了问题 • 2 人关注 • 1 个回复 • 344 次浏览 • 2017-03-31 09:52 • 来自相关话题

模拟窗口如何通过JS关闭

长得丑还智障 回复了问题 • 2 人关注 • 1 个回复 • 250 次浏览 • 2017-03-27 14:08 • 来自相关话题

app.js中判断是哪个页面然后执行相应页面方法,请问各页面的方法的正确写法?这样写是怎样生效?有什么好处?

回复

哀差闷 发起了问题 • 1 人关注 • 0 个回复 • 231 次浏览 • 2017-03-19 13:22 • 来自相关话题

条新动态, 点击查看
csalhl

csalhl 回答了问题 • 2017-02-13 16:06 • 50 个回复 不感兴趣

Amaze UI 3.0 建议反馈帖

赞同来自:

<p>位置不对</p>
<p>位置不对</p>

Amaze UI 3.0 建议反馈帖

逝水无痕 回复了问题 • 31 人关注 • 50 个回复 • 6301 次浏览 • 6 天前 • 来自相关话题

AmazeUI瘦身全攻略

有明 发表了文章 • 2 个评论 • 1243 次浏览 • 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 个评论 • 1366 次浏览 • 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>

【弹幕】用amaze制作弹幕 代码简单

Nero 回复了问题 • 18 人关注 • 10 个回复 • 2122 次浏览 • 2016-06-16 12:03 • 来自相关话题

Amaze UI 3.0 建议反馈帖

回复

逝水无痕 回复了问题 • 31 人关注 • 50 个回复 • 6301 次浏览 • 6 天前 • 来自相关话题

技术群满呐!! 可否扩容呢??

回复

jc_迟早 发起了问题 • 1 人关注 • 0 个回复 • 101 次浏览 • 2017-05-03 18:17 • 来自相关话题

关于amazeUI有活跃的群吗?

回复

jc_迟早 发起了问题 • 1 人关注 • 0 个回复 • 233 次浏览 • 2017-04-17 17:41 • 来自相关话题

请教下nav导航做成单页切换效果,即点击某个菜单显示某个div中内容。 这个如何实现,还是要自己写js?

回复

light颖 回复了问题 • 3 人关注 • 2 个回复 • 208 次浏览 • 2017-03-13 19:29 • 来自相关话题

【有奖活动】大家来找茬,看谁才是真正的火眼金睛!

AmazeUI 发表了文章 • 11 个评论 • 910 次浏览 • 2016-08-02 15:30 • 来自相关话题

感谢各位两年多来对于Amaze UI的大力支持,没有你们,Amaze UI就不会有现在的成果,虽然我们正走在日益完善的道路上,但难免还会遇到各种预料不到的问题,所以,现在开贴诚邀各位踊跃来“找茬”,如你反馈的BUG真实存在,并且复现成功,将会获得精美小礼品一份。具体发帖形式如下:(请点击右上角发布问题来反馈,不要再本帖直接回复。)1、 标题:一句话简单概括问题。2、 文章内容:问题详细描述产生环境- 操作系统及版本:- 浏览器及版本:- 演示地址:3、 复现步奏进入http://bin.amazeui.org/复现问题,并且填写复现后的链接。4、 添加相关标签,如本次活动,请添加两级标签,一级标签为“BUG”,二级标签为具体的问题所在的组件名称,如List、Table等。 如未能按照以上格式反馈的,一律视为无效,请各位严格按照发帖规格来提交,如出现多个用户反馈同一个问题,按发帖最早的帖子为准。发帖规范:未来无论是提交什么问题,添加相应的标签即可得到最快的解答。活动时间:8月2日-8月14日提交BUG范围:仅限Amaze UI Web、下拉刷新、无限级联(后两个为论坛网友“老配”提供,感谢他的分享,为了能够更好的鼓励开发者,也请各位针对这两款插件多提一些意见,同样包括在活动内哟。)活动奖品:Amaze UI鼠标垫100个、定制T恤30件。奖品照片: 注意事项:反馈复现成功一次即可获得鼠标垫,一旦反馈复现成功达到三次即可升级为定制T恤。重点来了,每个用户可多次获奖!!!你们可以尽情的提BUG了!!但要保证是真实有效的!!ps:为了能够让Amaze UI更好的服务于大家,希望每个用户在后期使用Amaze UI的期间随时反馈BUG,方便我们后期完善,谢谢支持。 感谢各位两年多来对于Amaze UI的大力支持,没有你们,Amaze UI就不会有现在的成果,虽然我们正走在日益完善的道路上,但难免还会遇到各种预料不到的问题,所以,现在开贴诚邀各位踊跃来“找茬”,如你反馈的BUG真实存在,并且复现成功,将会获得精美小礼品一份。具体发帖形式如下:(请点击右上角发布问题来反馈,不要再本帖直接回复。)1、 标题:一句话简单概括问题。2、 文章内容:问题详细描述产生环境- 操作系统及版本:- 浏览器及版本:- 演示地址:3、 复现步奏进入http://bin.amazeui.org/复现问题,并且填写复现后的链接。4、 添加相关标签,如本次活动,请添加两级标签,一级标签为“BUG”,二级标签为具体的问题所在的组件名称,如List、Table等。 如未能按照以上格式反馈的,一律视为无效,请各位严格按照发帖规格来提交,如出现多个用户反馈同一个问题,按发帖最早的帖子为准。发帖规范:未来无论是提交什么问题,添加相应的标签即可得到最快的解答。活动时间:8月2日-8月14日提交BUG范围:仅限Amaze UI Web、下拉刷新、无限级联(后两个为论坛网友“老配”提供,感谢他的分享,为了能够更好的鼓励开发者,也请各位针对这两款插件多提一些意见,同样包括在活动内哟。)活动奖品:Amaze UI鼠标垫100个、定制T恤30件。奖品照片:  注意事项:反馈复现成功一次即可获得鼠标垫,一旦反馈复现成功达到三次即可升级为定制T恤。重点来了,每个用户可多次获奖!!!你们可以尽情的提BUG了!!但要保证是真实有效的!!ps:为了能够让Amaze UI更好的服务于大家,希望每个用户在后期使用Amaze UI的期间随时反馈BUG,方便我们后期完善,谢谢支持。
[ 查看全部 ]
<p>
QQ图片20160802153138.png
<br />感谢各位两年多来对于Amaze UI的大力支持,没有你们,Amaze UI就不会有现在的成果,虽然我们正走在日益完善的道路上,但难免还会遇到各种预料不到的问题,所以,现在开贴诚邀各位踊跃来&ldquo;找茬&rdquo;,如你反馈的BUG真实存在,并且复现成功,将会获得精美小礼品一份。</p><p><strong>具体发帖形式如下:(请点击右上角发布问题来反馈,不要再本帖直接回复。)</strong></p><p>1、 标题:一句话简单概括问题。</p><p>2、 文章内容:</p><p>问题详细描述</p><p>产生环境</p><p>- 操作系统及版本:</p><p>- 浏览器及版本:</p><p>- 演示地址:</p><p>3、 复现步奏</p><p>进入http://bin.amazeui.org/复现问题,并且填写复现后的链接。</p><p>4、 添加相关标签,如本次活动,请添加两级标签,一级标签为&ldquo;BUG&rdquo;,二级标签为具体的问题所在的组件名称,如List、Table等。</p><p>
2.jpg
<br />如未能按照以上格式反馈的,一律视为无效,请各位严格按照发帖规格来提交,如出现多个用户反馈同一个问题,按发帖最早的帖子为准。</p><p>发帖规范:未来无论是提交什么问题,添加相应的标签即可得到最快的解答。</p><p><strong>活动时间:8月2日-8月14日</strong></p><p><strong>提交BUG范围:仅限Amaze UI Web、<a href="http://ask.amazeui.org/?/article/20">下拉刷新、无限级联</a>(后两个为论坛网友&ldquo;老配&rdquo;提供,感谢他的分享,为了能够更好的鼓励开发者,也请各位针对这两款插件多提一些意见,同样包括在活动内哟。)</strong></p><p><strong>活动奖品:Amaze UI鼠标垫100个、定制T恤30件。</strong></p><p><strong>奖品照片:</strong><br /><strong>
QQ图片20160808103724.jpg
</strong><br />&nbsp;</p><p><strong>注意事项:反馈复现成功一次即可获得鼠标垫,一旦反馈复现成功达到三次即可升级为定制T恤。</strong></p><p><strong>重点来了,每个用户可多次获奖!!!你们可以尽情的提BUG了!!但要保证是真实有效的!!</strong></p><p><strong>ps:为了能够让Amaze UI更好的服务于大家,希望每个用户在后期使用Amaze UI的期间随时反馈BUG,方便我们后期完善,谢谢支持。</strong></p>

最近写的几个插件:下拉刷新、无限级联

老配 发表了文章 • 3 个评论 • 507 次浏览 • 2016-08-02 14:17 • 来自相关话题

先把项目地址放来吧:级联项目地址: https://github.com/lwxyfer/infinitedropdown文档与演示: https://lwxyfer.github.io/infinitedropdown/下拉刷新地址: https://github.com/lwxyfer/pullLoad文档与介绍都放在github上了, 大家有需求可以用用,看看有什么问题,或者其他的需求,都提提啊。如果有其他一些的插件的需要也可以说啊,希望和大家一起学习交流嘛,也望各位大大多多指点指点。 先把项目地址放来吧: 级联项目地址: https://github.com/lwxyfer/infinitedropdown文档与演示: https://lwxyfer.github.io/infinitedropdown/下拉刷新地址: https://github.com/lwxyfer/pullLoad 文档与介绍都放在github上了, 大家有需求可以用用,看看有什么问题,或者其他的需求,都提提啊。如果有其他一些的插件的需要也可以说啊,希望和大家一起学习交流嘛,也望各位大大多多指点指点。
[ 查看全部 ]
<p>先把项目地址放来吧:&nbsp;</p><p>级联项目地址: <a href="https://github.com/lwxyfer/inf ... gt%3B文档与演示: <a href="https://lwxyfer.github.io/infi ... gt%3B下拉刷新地址: <a href="https://github.com/lwxyfer/pul ... gt%3B文档与介绍都放在github上了, 大家有需求可以用用,看看有什么问题,或者其他的需求,都提提啊。</p><p>如果有其他一些的插件的需要也可以说啊,希望和大家一起学习交流嘛,也望各位大大多多指点指点。</p>

AmazeUI瘦身全攻略

有明 发表了文章 • 2 个评论 • 1243 次浏览 • 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>
HTML5跨屏前端框架,采用“组件式开发”以及“移动优先”的设计理念,开发者基于丰富的组件可快速构建出HTML5响应式网站,为企业适配不同终端节约了大量的开发时间和研发成本。