51工具盒子
今天主要分享下AUI2.0页面的基本交互效果。上一篇主要是大概介绍到了AUI2.0的列表和排版。回顾下上一篇： 列表和排版布局- 跨平台移动前端框架AUI 2.0
Toast
参考《JS组件-aui-toast 》使用方法
先看下代码：
<div class="aui-content-padded">
<div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="showDefault('success')">默认样式（toast）</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('fail')">失败（toast）</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('custom')">自定义</div>
<div class="aui-btn aui-btn-block aui-btn-warning" tapmode onclick="showDefault('loading')">弹出loading样式（toast）</div>
</div>
<script type="text/javascript" src="../../script/aui-toast.js" ></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
}
var toast = new auiToast({
})
function showDefault(type){
switch (type) {
case "success":
toast.success({
title:"提交成功",
duration:2000
});
break;
case "fail":
toast.fail({
title:"提交失败",
duration:2000
});
break;
case "custom":
toast.custom({
title:"提交成功",
html:'<i class="aui-iconfont aui-icon-laud"></i>',
duration:2000
});
break;
case "loading":
toast.loading({
title:"加载中",
duration:2000
},function(ret){
console.log(ret);
setTimeout(function(){
toast.hide();
}, 3000)
});
break;
default:
// statements_def
break;
}
}
</script>
看下效果：
猛击：DEMO
对话框
参考《JS组件 - aui-dialog》使用方法
看下代码：
<div class="aui-content-padded">
<div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="openDialog('text')">基本dialog</div>
</div>
<div class="aui-content-padded">
<div class="aui-btn aui-btn-block aui-btn-primary" tapmode onclick="openDialog('callback')">带有回调的dialog</div>
</div>
<div class="aui-content-padded">
<div class="aui-btn aui-btn-block aui-btn-warning" tapmode onclick="openDialog('input')">带有输入框的dialog</div>
</div>
<script type="text/javascript" src="../../script/aui-dialog.js" ></script>
<script type="text/javascript">
var dialog = new auiDialog({})
function openDialog(type){
switch (type) {
case "text":
dialog.alert({
title:"弹出提示",
msg:'这里是内容',
buttons:['取消','确定']
},function(ret){
console.log(ret)
})
break;
case "callback":
dialog.alert({
title:"弹出提示",
msg:'这里是内容',
buttons:['取消','确定']
},function(ret){
if(ret){
dialog.alert({
title:"提示",
msg:"您点击了第"+ret.buttonIndex+"个按钮",
buttons:['确定']
});
}
})
break;
case "input":
dialog.prompt({
title:"弹出提示",
text:'默认内容',
buttons:['取消','确定']
},function(ret){
if(ret.buttonIndex == 2){
dialog.alert({
title:"提示",
msg: "您输入的内容是："+ret.text,
buttons:['确定']
});
}
})
break;
default:
break;
}
}
</script>
效果如下：
猛击：DEMO
聊天气泡
这个功能非常好，先前在jQuery Mobile没看到，用于平时的聊天室项目中很不错。
看下代码：
<section class="aui-chat">
<div class="aui-chat-header">2016年7月13日</div>
<div class="aui-chat-item aui-chat-left">
<div class="aui-chat-media">
<img src="../../image/demo2.png" />
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
<div class="aui-chat-content">
<div class="aui-chat-arrow"></div>
Hello AUI 2.0!
</div>
<div class="aui-chat-status aui-chat-status-refresh">
<i class="aui-iconfont aui-icon-correct aui-text-success"></i>
</div>
</div>
</div>
<div class="aui-chat-item aui-chat-right">
<div class="aui-chat-media">
<img src="../../image/liulangnan.png" />
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">流浪男</div>
<div class="aui-chat-content">
<div class="aui-chat-arrow"></div>
你好！
</div>
<div class="aui-chat-status">
<i class="aui-iconfont aui-icon-info aui-text-danger"></i>
</div>
</div>
</div>
<div class="aui-chat-item aui-chat-left">
<div class="aui-chat-media">
<img src="../../image/demo2.png" />
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
<div class="aui-chat-content">
<div class="aui-chat-arrow"></div>
<img src="../../image/l1.png" />
</div>
</div>
</div>
<div class="aui-chat-item aui-chat-right">
<div class="aui-chat-media">
<img src="../../image/liulangnan.png" />
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">流浪男</div>
<div class="aui-chat-content">
<div class="aui-chat-arrow"></div>
以前拍摄的牛背山星空
</div>
</div>
</div>
<div class="aui-chat-item aui-chat-left">
<div class="aui-chat-media">
<img src="../../image/demo2.png" />
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
<div class="aui-chat-content">
<div class="aui-chat-arrow"></div>
<img src="../../image/l2.png" />
</div>
</div>
</div>
</section>
效果如下：
猛击：DEMO
下拉刷新
参考《JS组件-aui-pull-refresh》 使用方法
<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
<section class="aui-refresh-content">
<div class="aui-content">
<div id="demo">
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
</div>
</div>
</section>
<script src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
var pullRefresh = new auiPullToRefresh({
container: document.querySelector('.aui-refresh-content'),
triggerDistance: 100
},function(ret){
if(ret.status=="success"){
setTimeout(function(){
var wrap = document.getElementById("demo")
var lis = wrap.querySelectorAll('.aui-card-list');
for (var i = lis.length, length = i + 10; i < length; i++) {
var html = '<div class="aui-card-list">'+
'<div class="aui-card-list-header">'+
'卡片布局头部区域'+(i+1)+''+
'</div>'+
'<div class="aui-card-list-content-padded">'+
'内容区域，卡片列表布局样式可以实现APP中常见的各类样式'+
'</div>'+
'<div class="aui-card-list-footer">'+
'底部区域'+
'</div>'+
'</div>';
wrap.insertAdjacentHTML('afterbegin', html);
}
pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
},1500)
}
})
</script>
提示条
一个常见的提示条样式
<div class="aui-tips aui-margin-b-15" id="tips-1">
<i class="aui-iconfont aui-icon-info"></i>
<div class="aui-tips-title">消息提示条消息提示条消息提示</div>
<i class="aui-iconfont aui-icon-close"></i>
</div>
效果如下图：
图标
AUI为我们提供了很多icon，感觉足以用了，先看下代码吧：
<secton class="aui-grid">
<div class="row aui-text-center">
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-menu"></i>
<p>menu</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-paper"></i>
<p>paper</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-info"></i>
<p>info</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-question"></i>
<p>question</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-left"></i>
<p>left</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-top"></i>
<p>right</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-right"></i>
<p>top</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-down"></i>
<p>down</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-correct"></i>
<p>correct</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-close"></i>
<p>close</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-plus"></i>
<p>plus</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-minus"></i>
<p>minus</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-my"></i>
<p>my</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-home"></i>
<p>home</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-phone"></i>
<p>phone</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-mobile"></i>
<p>mobile</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-laud"></i>
<p>laud</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-like"></i>
<p>like</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-star"></i>
<p>star</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-comment"></i>
<p>comment</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-share"></i>
<p>share</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-pencil"></i>
<p>pencil</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-edit"></i>
<p>edit</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-search"></i>
<p>search</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-image"></i>
<p>image</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-camera"></i>
<p>camera</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-video"></i>
<p>video</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-mail"></i>
<p>mail</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-more"></i>
<p>more</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-trash"></i>
<p>trash</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-recovery"></i>
<p>recovery</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-refresh"></i>
<p>refresh</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-cart"></i>
<p>cart</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-gear"></i>
<p>gear</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-map"></i>
<p>map</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-location"></i>
<p>location</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-forward"></i>
<p>forward</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-back"></i>
<p>back</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-lock"></i>
<p>lock</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-unlock"></i>
<p>unlock</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-calendar"></i>
<p>calendar</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-date"></i>
<p>date</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-display"></i>
<p>display</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-hide"></i>
<p>hide</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-flag"></i>
<p>flag</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-cert"></i>
<p>cert</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-qq"></i>
<p>qq</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-wechat"></i>
<p>wechat</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-wechat-circle"></i>
<p>wechat-circle</p>
</div>
<div class="aui-col-xs-3">
<i class="aui-iconfont aui-icon-weibo"></i>
<p>weibo</p>
</div>
</div>
</section>
看下图标长什么样子：
猛击：DEMO
总结
太累了，先分享到这里了，后面分享内容：组件。
![[开源]文件管理系统，支持分片上传、秒传，音视频、文档在线转码](https://img1.51tbox.com/static/2024-03-14/col/1a9fd5e81728c0093fdba3f305100ba9/13e43a498a6c4b42a90fd03957bd6618.jpg)
