aui

簡介

aui 是一套基於原生javascript開發的移動端UI庫，包含常用js方法、字元校驗、dialog提示彈窗、側滑菜單、時間選擇器、多級聯動、聊天UI、項目常用模板......

特點

1、標準化，產品化

2、更多復用，更快效率

3、多人協作，更加統一

4、維護方便

5、易於使用

6、減少UI設計時間

引用

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

演示

查看演示

組件

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/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.actionmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/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/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.popover.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/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/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.picker.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/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/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.poster.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/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/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/css/aui.sidemenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/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({ //設置配置數據
	position: 'left',
	moveType: 'main-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)
});