官方公告

官方公告

最新动态,版本发布
开发讨论

开发讨论

与前端大神一起探索
技术分享

技术分享

你的开发加油站
问题反馈

问题反馈

非常抱歉,AUI会有一些bug,感谢反馈给我们

AUI调研

回复

开发讨论lidaliang 发起了问题 • 1 人关注 • 0 个回复 • 421 次浏览 • 2016-04-19 16:52 • 来自相关话题

请问官网手机版社区底部的图标是如何实现的

回复

开发讨论yupeng79 发起了问题 • 1 人关注 • 0 个回复 • 793 次浏览 • 2016-04-18 23:00 • 来自相关话题

请问下aui的下拉刷新功能,为何每个item点击没有点击反馈效果的?如何才能有点击效果?

回复

问题反馈104828720wt 发起了问题 • 1 人关注 • 0 个回复 • 816 次浏览 • 2016-04-18 09:39 • 来自相关话题

现在还缺少一个下拉列表

开发讨论流浪男 回复了问题 • 3 人关注 • 1 个回复 • 573 次浏览 • 2016-04-18 00:40 • 来自相关话题

AUI中关于如何扩展和修改图标

技术分享流浪男 发表了文章 • 9 个评论 • 3363 次浏览 • 2016-04-17 22:16 • 来自相关话题

在1.2.0中,AUI将图标样式分离了出来,方便开发者进行修改。ttf字体图标的替换和修改我们可以借助一些字体编辑软件来操作BirdFont(这个也是我一直在用的),也可以另外建立ttf文件进行扩展。下面说一下如果进行扩展:
我们可以从阿里图标库 http://www.iconfont.cn/  中选择图标,并打包下载,解压后看到以下文件:





在里面我们用到有iconfont.css、iconfont.ttf,如果想使用svg的话可以一并引入。
把上面两个文件放到css文件夹中,做简单的修改,避免冲突我们需要将font-family重新命名,和删掉没用的字体文件@font-face {font-family: "自定义字体名称";
src: url('mami-iconfont.ttf') format('truetype');
}

.iconfont {
font-family:"自定义字体名称" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}其他的可以保持不变,修改完成后保存,页面使用时使用时将css文件引入,然后就可以直接<i class="iconfont icon-*"></i>来调用了。
 
下面介绍下BirdFont编辑ttf文件,编辑ttf文件时需要有一定的矢量图绘制基础,以mac的BirdFont为例:
第一步





 
 
第二步
点击指向按钮,选择要编辑的ttf文件





 
第三步,双击箭头指向方向





 
我们可以看到全部的图标了,双击一个图标进入编辑
 





 
左侧为工具栏,右侧为视图,我们可以直接用此软件编辑,也可以从外部将图标复制进来




编辑完成后,保存功能,点击右上角按钮,导出文件










 





 
OK,这样就大工告成了,希望本教程可以对你有所帮助!!!

 
 
 
 
  查看全部
在1.2.0中,AUI将图标样式分离了出来,方便开发者进行修改。ttf字体图标的替换和修改我们可以借助一些字体编辑软件来操作BirdFont(这个也是我一直在用的),也可以另外建立ttf文件进行扩展。下面说一下如果进行扩展:
我们可以从阿里图标库 http://www.iconfont.cn/  中选择图标,并打包下载,解压后看到以下文件:

QQ20160417-0@2x.png

在里面我们用到有iconfont.css、iconfont.ttf,如果想使用svg的话可以一并引入。
把上面两个文件放到css文件夹中,做简单的修改,避免冲突我们需要将font-family重新命名,和删掉没用的字体文件
@font-face {font-family: "自定义字体名称";
src: url('mami-iconfont.ttf') format('truetype');
}

.iconfont {
font-family:"自定义字体名称" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
其他的可以保持不变,修改完成后保存,页面使用时使用时将css文件引入,然后就可以直接<i class="iconfont icon-*"></i>来调用了。
 
下面介绍下BirdFont编辑ttf文件,编辑ttf文件时需要有一定的矢量图绘制基础,以mac的BirdFont为例:
第一步

QQ20160417-4@2x.png

 
 
第二步
点击指向按钮,选择要编辑的ttf文件

QQ20160417-3@2x.png

 
第三步,双击箭头指向方向

QQ20160417-5@2x.png

 
我们可以看到全部的图标了,双击一个图标进入编辑
 

QQ20160417-6@2x.png

 
左侧为工具栏,右侧为视图,我们可以直接用此软件编辑,也可以从外部将图标复制进来
QQ20160417-7@2x.png

编辑完成后,保存功能,点击右上角按钮,导出文件

QQ20160417-8@2x.png


QQ20160417-9@2x.png

 

QQ20160417-10@2x.png

 
OK,这样就大工告成了,希望本教程可以对你有所帮助!!!

 
 
 
 
 

下拉刷新是不是一个frame只能调用1次?

问题反馈半城村落 回复了问题 • 2 人关注 • 1 个回复 • 691 次浏览 • 2016-04-17 20:40 • 来自相关话题

建议AUIcss加一个侧滑菜单

问题反馈流浪男 回复了问题 • 2 人关注 • 2 个回复 • 1321 次浏览 • 2016-04-17 11:50 • 来自相关话题

aui的radio和checkbox的问题

开发讨论rqfreedom 回复了问题 • 2 人关注 • 2 个回复 • 708 次浏览 • 2016-04-16 14:22 • 来自相关话题

AUI 时间轴的问题

问题反馈bughp 回复了问题 • 3 人关注 • 2 个回复 • 777 次浏览 • 2016-04-16 12:33 • 来自相关话题

能否放出移动网页的Demo源码?

开发讨论无忧特购 回复了问题 • 3 人关注 • 2 个回复 • 752 次浏览 • 2016-04-16 00:48 • 来自相关话题

测试,谢谢

开发讨论无忧特购 回复了问题 • 2 人关注 • 1 个回复 • 462 次浏览 • 2016-04-16 00:44 • 来自相关话题

还缺少一个下拉选择功能

开发讨论无忧特购 回复了问题 • 2 人关注 • 1 个回复 • 622 次浏览 • 2016-04-16 00:44 • 来自相关话题

说说大家的都是做啥的

开发讨论layen 回复了问题 • 2 人关注 • 2 个回复 • 485 次浏览 • 2016-04-13 21:22 • 来自相关话题

让你的APP边框显示原生的1px

技术分享流浪男 发表了文章 • 1 个评论 • 1130 次浏览 • 2016-04-13 14:38 • 来自相关话题

面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个border。怎样让1px更细,看起来像原生的?下面教大家一个方法
.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。

PS:特别说明


千万别漏下了pointer-events: none;要不然就没法点击了
 
原文链接:http://www.liulangnan.com/archives/68 查看全部
面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个border。怎样让1px更细,看起来像原生的?下面教大家一个方法
.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}
如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。


PS:特别说明



千万别漏下了pointer-events: none;要不然就没法点击了
 
原文链接:http://www.liulangnan.com/archives/68

【最新】AUI仿饿了么订单页面模板

技术分享流浪男 发表了文章 • 6 个评论 • 3417 次浏览 • 2016-04-13 14:27 • 来自相关话题

利用AUI Flex布局完成的放饿了么订单界面

图片效果及下载




 
利用AUI Flex布局完成的放饿了么订单界面

图片效果及下载
IMG_2107.PNG