×

组件 - 跨平台移动前端框架AUI 2.0

作者:Terry2016.09.23来源:Web前端之家浏览:48325评论:1
关键词:AUI2.0移动框架

aui.png

最后一章节主要分享下AUI2.0页面的常用组件,组件在我们项目交互中用得很多,所以这个必须要掌握的。

上一篇主要是大概介绍到了AUI2.0的页面基本交互。回顾下上一篇:  页面基本交互- 跨平台移动前端框架AUI 2.0

我自己试过,要比现在流行的swipe轻巧很多,可以看下代码和效果:

<link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
<div id="aui-slide">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node">
            <div class="aui-grid">
                <div class="aui-row">
                    <div class="aui-col-xs-4">
                        <div class="aui-badge">88</div>
                        <i class="aui-iconfont aui-icon-home"></i>
                        <div class="aui-grid-label">首页</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-gear"></i>
                        <div class="aui-grid-label">设置</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-map"></i>
                        <div class="aui-grid-label">地图</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-calendar"></i>
                        <div class="aui-grid-label">日历</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <div class="aui-badge"></div>
                        <i class="aui-iconfont aui-icon-date"></i>
                        <div class="aui-grid-label">日期</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <div class="aui-dot"></div>
                        <i class="aui-iconfont aui-icon-cart"></i>
                        <div class="aui-grid-label">购物车</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content-padded">
                <span class="aui-text-danger">AUI Slide</span> 轮播组件不只局限于放置图片,可以自定义内容,分页样式有圆点(dot),线条(line),结合AUI Flex来实现图片及内容的水平、垂直居中
            </div>
        </div>
        <div class="aui-slide-node aui-bg-warning aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content-padded">
                <span class="aui-text-danger">AUI Slide</span>提供了常用的配置属性,可以自定义宽度,高度,自动播放,分页器样式等,支持无缝循环轮播
            </div>
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l1.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l3.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
            </div>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
            </div>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide3">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l1.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l3.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">
    var slide = new auiSlide({
        container:document.getElementById("aui-slide"),
        // "width":300,
        "height":260,
        "speed":300,
        "pageShow":true,
        "pageStyle":'dot',
        "loop":true,
        'dotPosition':'center',
        currentPage:currentFun
    })

    function currentFun(index) {
        console.log(index);
    }
    var slide2 = new auiSlide({
        container:document.getElementById("aui-slide2"),
        // "width":300,
        "height":240,
        "speed":300,
        "autoPlay": 0, //自动播放
        "pageShow":true,
        "loop":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })
    var slide3 = new auiSlide({
        container:document.getElementById("aui-slide3"),
        // "width":300,
        "height":240,
        "speed":500,
        "autoPlay": 3000, //自动播放
        "loop":true,
        "pageShow":true,
        "pageStyle":'line',
        'dotPosition':'center'
    })
    console.log(slide3.pageCount());
</script>

这里说明下具体参数:

var slide = new auiSlide({
    container:document.getElementById("aui-slide3"), //容器
    // "width":300, //宽度
    "height":240, //高度
    "speed":500, //速度
    "autoPlay": 3000, //自动播放
    "loop":true,//是否循环
    "pageShow":true,//是否显示分页器
    "pageStyle":'line', //分页器样式,分dot,line
    'dotPosition':'center' //当分页器样式为dot时控制分页器位置,left,center,right
})

OK,我们可以看下效果,猛戳连接:轮播DEMO

自定义主题皮肤是2.0中的一个亮点,在2.0中我们抛弃了一些组件的多种色调并分离了皮肤样式,结合aui-skin.js可以实现APP主题的切换功能。

参考《JS组件-aui-skin》来使用。aui-skin.js为控制皮肤主题样式显示的插件。

参数说明:

var skin = new auiSkin({
    name:"night", //皮肤样式名字,不能为中文
    skinPath:'../../css/aui-skin-night.css', //皮肤样式表路径
    default:false,//是否默认立即使用
    beginTime:"20:00",//开始时间
    endTime:"07:00"//结束时间
})

当default为true时,beginTime和endTime参数无效。使用beginTime和endTime,可以控制自定义皮肤使用时间,请注意时间格式的正确性

skin.setSkin(); //手动设置立即使用主题

skin.removeSkin(); //手动设置取消当前主题

aui-dialog.js为对话框组件,可以实现弹出对话框效果

参数说明:

title:"弹出提示",//标题

msg:"消息内容",//内容文字

buttons:['取消','确定'],

input:false //是否有input输入框

返回参数:

buttonIndex:1,//当前点击按钮

text:""//输入的内容

使用方法:

var dialog = new auiDialog();

dialog.alert({
    title:"弹出提示",
    msg:'这里是内容',
    buttons:['取消','确定']
},function(ret){
    console.log(ret)
})

aui-popup.js 为弹出菜单组件

使用方法

给按钮增加 aui-popup-for="top"属性,属性值对应弹出菜单容器ID,

引入js文件并加载

var popup = new auiPopup();

popup.show(el)  手动设置显示弹出层

使用案例:

<div class="aui-btn aui-btn-primary" aui-popup-for="top-left">左上角</div>
<div class="aui-popup aui-popup-top-left" id="top-left">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../../script/2.0/aui-popup.js" ></script>
<script type="text/javascript">
    var popup = new auiPopup();
</script>

这个在上面已经提到过了,效果可以参考前面的文章。

aui-toast.js为弹出提示类的组件

使用方法:

var toast = new auiToast();

成功类:

toast.success({
    title:"提交成功",
    duration:2000
});

失败类:
toast.fail({
    title:"提交失败",
    duration:2000
});

自定义图标:
toast.custom({
    title:"成功给了一个赞",
    html:'<i class="aui-iconfont aui-icon-laud"></i>',
    duration:2000
});

加载中:
toast.loading({
    title:"加载中",
    duration:2000
},function(ret){
    console.log(ret);
    setTimeout(function(){
        toast.hide();
    }, 3000)
});

<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>
<script type="text/javascript" src="../../script/2.0/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>

aui-tab.js为切换类的组件

参数说明

{

element:,容器

index:1,默认选中

repeatClick:false //是否允许重复点击,(设置为true时可以实现数量增加的功能)

}

返回:

{

index:1,当前点击的位置,默认为1

dom:el 当前点击的dom对象

}

<script type="text/javascript" src="../../script/2.0/aui-tab.js" ></script>
<script type="text/javascript">
    var tab = new auiTab({
        element:document.getElementById("footer"),
        index:1,
        repeatClick:false
    },function(ret){
        console.log(ret);
    });
</script>

aui-range.js滑块类插件

var range = new auiRange({
    element:document.getElementById("range") //滑块容器
},function(ret){
    console.log(ret)
})

aui-pull-refresh.js 下拉刷新组件

var pullRefresh = new auiPullToRefresh({
    container: document.querySelector('.aui-refresh-content'), //下拉容器
    triggerDistance: 100 //下拉高度
},function(ret){
    if(ret.status=="success"){
            pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
        },1500)
    }
})

aui-scroll.js为监听滚动条的插件,可以实时监听返回滚动高度和判断是否到达底部

var scroll = new auiScroll({
    listen:true, //是否监听滚动高度,开启后将实时返回滚动高度
    distance:200 //判断到达底部的距离,isToBottom为true
},function(ret){
   console.log(ret)
});

返回值

{

scrollTop:"",//滚动高度

isToBottom:true//是否到达底部,true,false

}

总结

总的来说,这些组件用起来比较方便,目前我用到了轮播组件,比较轻巧,虽然这个框架涉及到的内容比较多,不一定都会用到,但是我们可以抽取其中一些好的,应用到我们的项目当中。

到这里,跨平台移动前端框架AUI 2.0的内容都分享完了,希望能拓展大家的知识面。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/mobile-aui7.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • weblft weblft  发布于 2016-09-26 09:33:07   回复该评论
  • AUI还是第一次接触,还没玩过,根据博主的介绍,试着玩了下,比jQuery Mobile要精简很多啊,学习了。