官方公告

官方公告

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

开发讨论

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

技术分享

你的开发加油站
问题反馈

问题反馈

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

aui带有输入框的dialog

lsiya 发表了文章 • 0 个评论 • 202 次浏览 • 2018-12-19 22:35 • 来自相关话题

遇到一个小bug(不确定是否是aui版本问题),带输入框的dialog当定义type为password/text或者其他类型时发现type属性没有生效,在源码aui-dialog.js中修改
if(params.input){
  params.text = params.text ? params.text: '';
    var msgHtml = '<div class="aui-dialog-body"><input type="text" placeholder="'+params.text+'"></div>';
}


if(params.input){
  params.text = params.text ? params.text: '';
  params.type = params.type ? params.type: '';
   var msgHtml = '<div class="aui-dialog-body"><input type="'+params.type+'" placeholder="'+params.text+'"></div>';
            }
  查看全部
遇到一个小bug(不确定是否是aui版本问题),带输入框的dialog当定义type为password/text或者其他类型时发现type属性没有生效,在源码aui-dialog.js中修改
if(params.input){
  params.text = params.text ? params.text: '';
    var msgHtml = '<div class="aui-dialog-body"><input type="text" placeholder="'+params.text+'"></div>';
}


if(params.input){
  params.text = params.text ? params.text: '';
  params.type = params.type ? params.type: '';
   var msgHtml = '<div class="aui-dialog-body"><input type="'+params.type+'" placeholder="'+params.text+'"></div>';
            }
 

aui的模板框架可有

回复

qwert 发起了问题 • 1 人关注 • 0 个回复 • 966 次浏览 • 2018-09-21 15:26 • 来自相关话题

特来看看流浪男大神什么时候更新框架!~

回复

indiboy 发起了问题 • 2 人关注 • 0 个回复 • 768 次浏览 • 2018-03-24 20:54 • 来自相关话题

分享一个免费空间

jinxinkai 发表了文章 • 0 个评论 • 456 次浏览 • 2018-03-15 03:21 • 来自相关话题

【1G免费全能空间,免备案,无广告】 
1G全能空间 + 100M数据库(Mysql 5.5 / SQL Server 2005) 
支持的脚本:ASP、PHP(5.2 - 7.0)、.NET(2.0 / 4.0) 
没有任何限制,详细功能请访问: 
https***://www.yunzz.net/host/free.html(云邦互联) 
推广员:ftp206616x  查看全部
【1G免费全能空间,免备案,无广告】 
1G全能空间 + 100M数据库(Mysql 5.5 / SQL Server 2005) 
支持的脚本:ASP、PHP(5.2 - 7.0)、.NET(2.0 / 4.0) 
没有任何限制,详细功能请访问: 
https***://www.yunzz.net/host/free.html(云邦互联) 
推广员:ftp206616x 

微信扫码点餐 多人点餐 实时同步

ccx520wkk 发表了文章 • 2 个评论 • 1695 次浏览 • 2018-02-24 11:12 • 来自相关话题

thinkphp 5.0 商用微信扫码点餐源码,本人话费15万左右的开发费用,现在仅售3400RMB 需要的联系qq:1817703429

卖到就是赚到、微信扫码点餐技术支持,亳州点云网络科技有限公司,演示公众号: 点云网络科技;

无论你是学习还是直接使用或者二次开发都比较划算。错过了就会是你医生的遗憾。。。

数据表全部存在附件,后端基于hui_admin  语言:thinkphp5  前端:AUI  
Tb【URL】:
 
item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.594c1debH7Ae4B&id=562604542516





















































































  查看全部
thinkphp 5.0 商用微信扫码点餐源码,本人话费15万左右的开发费用,现在仅售3400RMB 需要的联系qq:1817703429

卖到就是赚到、微信扫码点餐技术支持,亳州点云网络科技有限公司,演示公众号: 点云网络科技;

无论你是学习还是直接使用或者二次开发都比较划算。错过了就会是你医生的遗憾。。。

数据表全部存在附件,后端基于hui_admin  语言:thinkphp5  前端:AUI  
Tb【URL】:
 
item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.594c1debH7Ae4B&id=562604542516

门店1副本.png


门店2.png


门店4.png


门店5.png


门店6副本.png


门店7副本.png


图片1.png


商家7副本.png


商家4.png


图片2.png


图片6.png


图片7.png


图片14.png


图片13.png


图片9.png


图片16副本.png


图片18副本.png

 

有没完整的demo

ccx520wkk 回复了问题 • 4 人关注 • 3 个回复 • 3150 次浏览 • 2018-02-24 11:06 • 来自相关话题

微信点餐 UI 开发

回复

ccx520wkk 回复了问题 • 1 人关注 • 1 个回复 • 1031 次浏览 • 2018-02-24 11:06 • 来自相关话题

下拉刷新怎么用啊

fla897907070 发表了文章 • 1 个评论 • 991 次浏览 • 2017-11-03 09:54 • 来自相关话题

下拉刷新没有看出效果啊
下拉刷新没有看出效果啊

jui 前端开发框架,构建体验度更好的H5应用!!

yangyuan 回复了问题 • 3 人关注 • 2 个回复 • 3324 次浏览 • 2017-05-04 11:58 • 来自相关话题

aui-skin加密后用不了

回复

丢了蜡笔的小新 发起了问题 • 1 人关注 • 0 个回复 • 685 次浏览 • 2017-04-03 13:25 • 来自相关话题

分享一个Select选择列表数据组件

fantian 发表了文章 • 3 个评论 • 1904 次浏览 • 2017-03-17 22:25 • 来自相关话题

第一次用AUI框架做移动端界面,感觉UI还是不错,组件还是很齐全,不过某些需求需要的效果没有,比如选择列表数据等,于是就写了一个这个小组件。





 
第一次用AUI框架做移动端界面,感觉UI还是不错,组件还是很齐全,不过某些需求需要的效果没有,比如选择列表数据等,于是就写了一个这个小组件。

demo.gif

 

整理的一套很炫的活动切换页面效果,方便调用和扩展

Chauncey 发表了文章 • 0 个评论 • 2238 次浏览 • 2016-09-13 17:08 • 来自相关话题

github地址:[https://]github.com/Chaunjie/page-transitions
预览地址
觉得好的话可以在github给个star

欢迎大家在github提建议
github地址:[https://]github.com/Chaunjie/page-transitions
预览地址
觉得好的话可以在github给个star

欢迎大家在github提建议

最近写的一个基于AUI的react组件库,希望对大家有用

Chauncey 发表了文章 • 4 个评论 • 1911 次浏览 • 2016-08-30 17:10 • 来自相关话题

觉得好的话可以给个star。github地址:github.com/Chaunjie/Aui-react
觉得好的话可以给个star。github地址:github.com/Chaunjie/Aui-react

AUI中实现用百分比控制显示星星分数

流浪男 发表了文章 • 3 个评论 • 1745 次浏览 • 2016-05-23 14:41 • 来自相关话题

在很多app种项目中,经常会出现用星星来显示评分值,计算出来的评分值可能带有小数,那么在AUI中如何实现这种展示方式呢?
css样式
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
.stars span:before,
.stars:before{
content:"\e64b\e64b\e64b\e64b\e64b"
}
.stars {
position: relative;
display: inline-block;
color: #ccc;
}
.stars span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #ffc30c;
white-space: nowrap;
}html文件
<div class="stars aui-iconfont"><span style="width:28%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:53%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:70%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:100%;"></span></div>




  查看全部
在很多app种项目中,经常会出现用星星来显示评分值,计算出来的评分值可能带有小数,那么在AUI中如何实现这种展示方式呢?
css样式
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
.stars span:before,
.stars:before{
content:"\e64b\e64b\e64b\e64b\e64b"
}
.stars {
position: relative;
display: inline-block;
color: #ccc;
}
.stars span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #ffc30c;
white-space: nowrap;
}
html文件
<div class="stars aui-iconfont"><span style="width:28%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:53%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:70%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:100%;"></span></div>

QQ20160523-2@2x.png

 

前端基础整理笔记 - CSS动画类(三)

流浪男 发表了文章 • 1 个评论 • 1523 次浏览 • 2016-04-27 11:59 • 来自相关话题

一、2D转换

transform




translate() 控制x、y位移

rotate() 顺时针旋转,单位deg

scale() 放大或缩小,x、y

skew() 翻转 ,x、y

matrix() 矩阵,组合方法,六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素,不常用







3D转换




translate3d(x,y,z)    定义 3D 转化。

translateX(x)    定义 3D 转化,仅使用用于 X 轴的值。

translateY(y)    定义 3D 转化,仅使用用于 Y 轴的值。

translateZ(z)   定义 3D 转化,仅使用用于 Z 轴的值。

scale3d(x,y,z)    定义 3D 缩放转换。

scaleX(x)    定义 3D 缩放转换,通过给定一个 X 轴的值。

scaleY(y)    定义 3D 缩放转换,通过给定一个 Y 轴的值。

scaleZ(z)    定义 3D 缩放转换,通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)    定义 3D 旋转。

rotateX(angle)    定义沿 X 轴的 3D 旋转。

rotateY(angle)    定义沿 Y 轴的 3D 旋转。

rotateZ(angle)    定义沿 Z 轴的 3D 旋转。

perspective(n)    定义 3D 转换元素的透视视图。







transition 过渡

transition主要包含四个属性值:

    执行变换的属性:transition-property;

    变换延续的时间:transition-duration;

    在延续时间段,变换的速率变化transition-timing-function;

    变换延迟时间transition-delay




transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值(不常用,属性值太多)




transition-duration:动画持续时间,单位为s/ms




transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,




1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);




2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);




3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);




4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);




5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);




6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效(此属性太复杂)







transition-delay:

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果







animation 动画,类似于flash时间轴,通过百分比或者from(0%) to(100%)

div {

    animation: 自定义 5s;

    -webkit-animation: 自定义 5s;

}

@keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

@-webkit-keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

} 查看全部
一、2D转换

transform




translate() 控制x、y位移

rotate() 顺时针旋转,单位deg

scale() 放大或缩小,x、y

skew() 翻转 ,x、y

matrix() 矩阵,组合方法,六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素,不常用







3D转换




translate3d(x,y,z)    定义 3D 转化。

translateX(x)    定义 3D 转化,仅使用用于 X 轴的值。

translateY(y)    定义 3D 转化,仅使用用于 Y 轴的值。

translateZ(z)   定义 3D 转化,仅使用用于 Z 轴的值。

scale3d(x,y,z)    定义 3D 缩放转换。

scaleX(x)    定义 3D 缩放转换,通过给定一个 X 轴的值。

scaleY(y)    定义 3D 缩放转换,通过给定一个 Y 轴的值。

scaleZ(z)    定义 3D 缩放转换,通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)    定义 3D 旋转。

rotateX(angle)    定义沿 X 轴的 3D 旋转。

rotateY(angle)    定义沿 Y 轴的 3D 旋转。

rotateZ(angle)    定义沿 Z 轴的 3D 旋转。

perspective(n)    定义 3D 转换元素的透视视图。







transition 过渡

transition主要包含四个属性值:

    执行变换的属性:transition-property;

    变换延续的时间:transition-duration;

    在延续时间段,变换的速率变化transition-timing-function;

    变换延迟时间transition-delay




transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值(不常用,属性值太多)




transition-duration:动画持续时间,单位为s/ms




transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,




1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);




2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);




3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);




4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);




5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);




6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效(此属性太复杂)







transition-delay:

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果







animation 动画,类似于flash时间轴,通过百分比或者from(0%) to(100%)

div {

    animation: 自定义 5s;

    -webkit-animation: 自定义 5s;

}

@keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

@-webkit-keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}