aui

简介

aui 是一套基于原生javascript开发的移动端UI框架。包含常用js API(如：字符校验、本地定时存储、数组对象处理、ajax原生封装、设备信息获取、手势事件…)；插件(如：loading加载、dialog模态框、toast消息提示、picker多级联动…)；UI组件(如：button按钮、tag标签、card卡片…)；常用模板(如：侧滑菜单、加入购物车动画、星级评价、图片上传预览裁剪、选项卡…)。

特点

1、标准化，产品化

2、更多复用，更快效率

3、多人协作，更加统一

4、维护方便

5、易于使用

6、减少UI设计时间

引用

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>

演示

查看演示：https://aui-js.github.io/aui/index.html

文档

看云在线文档地址：https://www.kancloud.cn/chen-wanchun/aui-js

代码

Github仓库地址：https://github.com/aui-js/aui

api

extend 对象合并(可实现多层对象深度合并)

   aui.extend("原始参数", "新参数", true);

isDefine 判断字符串是否为空

   aui.isDefine(str);

space 删除字符串中指定字符

   aui.space(str, true);

replaceStr 去除字符串中空格

   aui.replaceStr(\'原字符串\', \'指定字符\');

uniq 数组去重

   aui.uniq(array);

getUrlstr 截取URL中参数(可获取中文内容)

   aui.getUrlstr(\'id\');

random 生成随机数

   aui.random(10, 100);

copy 复制到剪切板

   aui.copy(\'213421\');

checkIsDeveloper 验证是否是开发者

   aui.checkIsDeveloper(false);

setLocal 本地存储(可设置存储时间)

   aui.setLocal(\'items\', items, 1*24*60*60);
   //获取缓存
   aui.getLocal(\'items\');
   //移除缓存，一般情况不手动调用，缓存过期自动调用
   aui.removeLocal(\'items\');
   //清空所有缓存
   aui.clearLocal();

import 引入 js / css 文件

   aui.import(\'aui.js\')
   aui.import([\'aui.js\', \'aui.css\'])

组件

loading加载动画

预览

显示loading加载：

aui.showload({
    msg: "加载中"
});

隐藏loading加载：

aui.hideload();

toast消息提示弹窗

预览

示例：

aui.toast({
    icon: "../../img/success.png",
    msg: "支付成功！",
    direction: "col"
},function(ret){

});

dialog提示窗

预览

1、alert单按钮提醒弹窗

aui.alert({
    title: "提示", //可选
    msg: "您点击了alert单按钮模态弹窗！",
    mask: true,
    touchClose: true, //可选
    btns: ["确定"], //可选
    //或btns: [{name: \'按钮1\', color: \'#f00\'},{name: \'按钮2\', color: \'#00f\'}], //可选
    theme: 1, //可选
    style: { //可选
        w: "75%",
        h: "auto",
        bg: \'#FFF\',
        zIndex: 999,
        animate: "aui-scale-in-tosmall-dialog",
        title: {
            bg: "#FFF",
            color: "#333",
            lineHeight:"55px",
            fontSize: "17px",
            textAlign: "center",
            padding: "0px"
        }
    }
},function(ret){
    console.log(ret.index);
    if(ret.index == 0){
        aui.toast({msg: "您点击了确定"});
    }
});

2、confirm双按钮提醒弹窗

aui.confirm({
    msg: "您点击了confirm双按钮模态弹窗！",
    btns: ["取消", "确定"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您点击了确定"});
    }
});

3、delete删除提醒弹窗

aui.delete({
    msg: "您点击了delete删除模态弹窗！",
    btns: ["取消", "删除"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您点击了删除"});
    }
});

4、prompt输入弹窗

aui.prompt({
    items: [{
        label: \'姓名：\', 
        type: \'text\', 
        value: \'\', 
        placeholder: \'请输入姓名\'
    },{
        label: \'年龄：\', 
        type: \'number\', 
        value: \'\', 
        placeholder: \'请输入年龄\'
    }],
    btns: ["取消", "确定"],
},function(ret){
    console.log(ret.data);	
    if(ret.index == 1)
    {
        aui.alert({
            title: "输入结果：",
            msg: "<div style=\'text-align: left;\'>姓名：" + ret.data[0] + "</br>年龄：" + ret.data[1]+"</div>",
            btns: ["确定"],
        }, function(ret){
            if(ret.index == 0){
                aui.toast({msg: "您点击了确定"});
            }
        });
    }
});

5、confirm带图标双按钮提醒弹窗

aui.confirm({
    msg: "<div style=\'text-align: center;\'>"
        +"<img src=\'../../img/success-green.png\' style=\'width: 60px; margin: 0 auto;\'>"
        +"<p style=\'width: 100%; line-height: 25px; color: 15px;\'>带图标模态弹窗</p>"
    +"</div>",
    btns: ["取消", "确定"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您点击了确定"});
    }
});

6、多按钮弹窗

aui.confirm({
    msg: "您点击了多按钮弹窗！",
    btns: [{name: \'残忍拒绝\', color: \'\'},{name: \'再逛逛\', color: \'\'}, {name: "返回首页", color: "#909090"}], //可选
    theme: 3, //可选
},function(ret){
    console.log(ret.index);	
    if(ret.index == 0){
        aui.toast({msg: "您点击了残忍拒绝"});
    }
    else if(ret.index == 1){
        aui.toast({msg: "您点击了再逛逛"});
    }
    else if(ret.index == 2){
        aui.toast({msg: "您点击了返回首页"});
    }
});

actionsheet操作表

预览

示例:

aui.actionSheet({
    title: \'上传图片\',
    mask: true,
    touchClose: true,
    items: [{
        name: "从相册选择",
    },{
        name: "拍照"
    }],
    cancle: "取消",
    theme: 1,
    location: "bottom"
},function(ret){
    console.log(ret.index);				
});

actionmenu分享弹窗

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.actionmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.actionmenu.js"></script>

示例：

aui.actionMenu({
    title: \'分享至\',
    mask: true,
    touchClose: true,
    items: [
        {name: "微信", img: "../../img/weixin.png"},
        {name: "朋友圈", img: "../../img/pengyouquan.png"},
        {name: "QQ", img: "../../img/QQ.png"},
        {name: "微博", img: "../../img/weibo.png"}
    ],
    cancle: "取消",
    theme: 1,
    location: "bottom"
},function(ret){
    console.log(ret.index);				
});

popover菜单

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.popover.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.popover.js"></script>

示例：

aui.popover.open({
    warp: \'.aui-header-right\',
    items: [
        {name: \'微信\', img: \'../../img/weixin.png\'},
        {name: \'朋友圈\', img: \'../../img/pengyouquan.png\'},
        {name: \'QQ\', img: \'../../img/QQ.png\'},
        {name: \'微博\', img: \'../../img/weibo.png\'}
    ],
    mask: true,
    location: \'bottom\'
},function(ret){
    console.log(ret);
    aui.toast({msg: ret.el.querySelector("span").innerHTML});
})	

picker多级联动

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.picker.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.picker.js"></script>

示例：

aui.picker.open({
    title: \'选择区域\',
    layer: 3,
    data: cityData, //城市数据
    select: function(ret){
        console.log(ret);
    }
},function(ret){
    console.log(ret);
    if(ret.status == 1){
        aui.picker.close(function(){
            aui.alert({msg: ret.data.text + " " + ret.data.children.text + \' \' + ret.data.children.children.text});						
        });						
    }
})

poster广告弹窗

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.poster.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.poster.js"></script>

示例：

aui.poster({
    image: \'https://xbjz1.oss-cn-beijing.aliyuncs.com/upload/default/share.png\'
});

sidemenu侧滑菜单

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.sidemenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.sidemenu.js"></script>

初始化：

aui.sidemenu.init({
    warp: \'.aui-container\',
    content: \'#aui-sidemenu-wapper\',
    position: \'left\',
    moveType: \'main-move\',
    moves: [\'.aui-container\'],
    mask: true,
    maskTapClose: true,
    drag: {
        use: true,
        //start: _this.dragcallback,
        //move: _this.dragcallback,
        end: function(ret){
            console.log(ret)
        }
    },
    style: {
        w: \'70vw\',
        h: \'100vh\',
        bg: \'#333\'
    },
}).then(function(ret){
    console.log(ret)
});

设置配置数据：

aui.sidemenu.setData({
    moveType: \'all-move\',
}).then(function(ret){
    //console.log(ret)
});

打开侧滑菜单：

aui.sidemenu.open({
    moveType: \'main-move\',
    speed: 10,
}).then(function(ret){
    console.log(ret)
});

关闭侧滑菜单：

aui.sidemenu.close({speed: 10}).then(function(ret){
    console.log(ret)
});

selectmenu下拉列表选择菜单

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.selectmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.selectmenu.js"></script>

打开：

aui.selectMenu.open({
    warp: \'.orderby-items\',
    layer: layer, // 1,2,3...
    data: [
    	{value: \'0\', text: \'昨天\'},
    	{value: \'1\', text: \'本周\'},
    	{value: \'2\', text: \'上周\'},
    	{value: \'3\', text: \'本月\'},
    	{value: \'4\', text: \'上月\'},
    ],
    checkedMore: true,
    select: function(ret){ //点击时获取下级数据
        //console.log(ret); //{value: \'0\', text: \'昨天\'}
        if(ret.pindex == 0){
            //ajax  -- 参数如ret.value
            var data = [
                {value: \'1\', text: \'1点\'},
                {value: \'2\', text: \'2点\'},
                {value: \'3\', text: \'3点\'},
                {value: \'4\', text: \'4点\'},
                {value: \'4\', text: \'5点\'},
                {value: \'4\', text: \'6点\'},
                {value: \'4\', text: \'7点\'},
                {value: \'4\', text: \'8点\'},
                {value: \'4\', text: \'9点\'},
                {value: \'4\', text: \'10点\'},
                {value: \'4\', text: \'11点\'},
                {value: \'4\', text: \'12点\'},
            ];
        }
        else if(ret.pindex == 1){
            var data = [
                {value: \'0\', text: \'10分\'},
                {value: \'1\', text: \'20分\'},
                {value: \'2\', text: \'30分\'},
                {value: \'3\', text: \'40分\'},
                {value: \'4\', text: \'50分\'},
                {value: \'4\', text: \'60分\'},
            ];
        }
        return data						
    },
}, function(ret){
    isShowModal = false;
    for(var i = 0; i < is.parentNode.querySelectorAll(\'.orderby-item\').length; i++){
        is.parentNode.querySelectorAll(\'.orderby-item\')[i].classList.remove(\'active\');				
    }
});

关闭

aui.selectMenu.close(function(){
    if(ret && ret.status == 0){
        console.log(ret);
        if(ret.data.length > 0){
            is.classList.add("selected");
            is.querySelector("span").innerText = \'\';
            for(var i = 0; i < ret.data[ret.data.length-1].length; i++){
                if(i != ret.data[ret.data.length-1].length - 1){
                    is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + \',\';																								
                }
                else{
                    is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text
                }
            }
        }
        else{
            is.classList.remove("selected");
            is.querySelector("span").innerText = \'三级列表\';
        }
    }
});

keypad数字键盘

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.keypad.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.keypad.js"></script>

示例：

aui.keypad.open({
    type: \'number\', //1、number | 2、point | 3、idcard
    mask: false,
    value: document.querySelector(\'#text1\').value
}, function(ret){
    console.log(ret);
    document.querySelector(\'#text1\').value = ret.result;
});

chatbox js聊天输入框

预览

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.chatbox.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.chatbox.js"></script>

示例：

aui.chatbox.init({
    warp: \'body\',
    autoFocus: true,
    record: {
        use: true,
    },
    emotion: {
        use: true,
        path: \'../../img/chat/emotion/\',
        file: \'emotion.json\'
    },
    extras: {
        use: true,
        btns: [
            {title: \'相册\', icon: \'iconimage\'},
            {title: \'拍摄\', icon: \'iconcamera_fill\'},
            {title: \'语音通话\', icon: \'iconvideo_fill\'},
            {title: \'位置\', icon: \'iconaddress1\'},
            {title: \'红包\', icon: \'iconredpacket_fill\'},
            {title: \'语音输入\', icon: \'icontranslation_fill\'},
            {title: \'我的收藏\', icon: \'iconcollection_fill\'},
            {title: \'名片\', icon: \'iconcreatetask_fill\'},
            {title: \'文件\', icon: \'iconmail_fill\'}						
        ],
    },				
    events: [\'recordStart\', \'recordCancel\', \'recordEnd\', \'chooseExtrasItem\', \'submit\'],
}, function(){

})
//开始录音
aui.chatbox.addEventListener({name: \'recordStart\'}, function(ret){
    console.log(ret);
    //aui.toast({msg: ret.msg})
});
//取消录音
aui.chatbox.addEventListener({name: \'recordCancel\'}, function(ret){
    console.log(ret);
    //aui.toast({msg: ret.msg})
});
//结束录音
aui.chatbox.addEventListener({name: \'recordEnd\'}, function(ret){
    console.log(ret);
    aui.toast({msg: ret.msg})
});
//选择附加功能
aui.chatbox.addEventListener({name: \'chooseExtrasItem\'}, function(ret){
    console.log(ret);
    aui.toast({msg: ret.data.title});
});			
//发送
aui.chatbox.addEventListener({name: \'submit\'}, function(ret){
    console.log(ret);
    aui.toast({msg: ret.data.value})
});