基本dialog 带有回调的dialog 带有输入框的dialog var dialog = new auiDialog function openDialog { case "text": dialog.alert({ title:"弹出提示", msg:'这里是内容', buttons:['取消','确定'] },function{ console.log break; case "callback": dialog.alert({ title:"弹出提示", msg:'这里是内容', buttons:['取消','确定'] },function{ dialog.alert({ title:"提示", msg:"您点击了第"+ret.buttonIndex+"个按钮", buttons:['确定'] }); } }) break; case "input": dialog.prompt({ title:"弹出提示", text:'默认内容', buttons:['取消','确定'] },function{ if{ dialog.alert({ title:"提示", msg: "您输入的内容是:"+ret.text, buttons:['确定'] }); } }) break; default: break; } }

Toast

这个功能非常好,先前在jQuery
Mobile没看到,用于平时的聊天室项目中很不错。

看下图标长什么样子:

 默认样式 失败 自定义 弹出loading样式 apiready = function; } var toast = new auiToast function showDefault { 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{ console.log; setTimeout{ toast.hide; break; default: // statements_def break; } }

太累了,先分享到这里了,后面分享内容:组件。

     卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     var pullRefresh = new auiPullToRefresh({ container: document.querySelector('.aui-refresh-content'), triggerDistance: 100 },function{ if(ret.status=="success"){ setTimeout{ var wrap = document.getElementById 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">'+ '卡片布局头部区域'++''+ '</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) } })

图标

数据解读页面基本交互 – 跨平台移动前端框架AUI 2.0-Web前端之家。对话框

一个常见的提示条样式

参考《JS组件-aui-pull-refresh》 使用方法

提示条

下拉刷新

参考《JS组件 – aui-dialog》使用方法

                                                                                                                                                                                                    wechat-circle      

聊天气泡

  消息提示条消息提示条消息提示 

参考《JS组件-aui-toast 》使用方法

AUI为我们提供了很多icon,感觉足以用了,先看下代码吧:

 2016年7月13日      AUI 2.0   Hello AUI 2.0!            流浪男   你好!            AUI 2.0            流浪男   以前拍摄的牛背山星空         AUI 2.0      

今天主要分享下AUI2.0页面的基本交互效果。上一篇主要是大概介绍到了AUI2.0的列表和排版。回顾下上一篇:
列表和排版布局- 跨平台移动前端框架AUI 2.0

总结

相关文章

网站地图xml地图