页面基本交互 - 跨平台移动前端框架AUI 2.0-工具盒子

今天主要分享下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