aui移動端UI組件庫

時間  2020-11-30
標籤 javascript css html java git github ajax json 小程序 微信小程序 欄目 無線 简体版
原文   原文鏈接

aui

logo

簡介

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

特色

一、標準化，產品化

二、更多複用，更快效率

三、多人協做，更加統一

四、維護方便

五、易於使用

六、減小UI設計時間css

引用

<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.htmlhtml

文檔

看雲在線文檔地址：https://www.kancloud.cn/chen-wanchun/aui-jsjava

代碼

Github倉庫地址：https://github.com/aui-js/auigit

組件

loading加載動畫

預覽
github

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
type number 1: 經常使用風格;
2: 點擊按鈕後在按鈕內顯示加載動畫;
3: 四個方塊旋轉;
4: 圓點放大縮小動畫(全屏首次加載過分動畫);
5: 圓點背景過分動畫-微信小程序效果(全屏首次加載過分動畫)		 1 否
msg string 提示內容 '' 否
mask boolean 是否顯示遮罩蒙版 true 否
direction string 橫向("row")或縱向("col")控制 'col' 否
theme number type=3時，控制全屏或小窗展現（1：小窗; 2：全屏） 1 否
style object {
bg: '背景',
color: '文字顏色',
maskBg: '遮罩層顏色',
zIndex: '層級'
}		 '' 否

顯示loading加載：ajax

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

隱藏loading加載：json

aui.hideload();

toast消息提示彈窗

預覽
小程序

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
msg string 提示內容 '' 是
icon string 圖標 '' 否
direction string 橫向("row")或縱向("col")控制 'col' 否
location string （icon參數未配置時可配置）位置
bottom:位於底部，從底部彈出顯示
middle:位於頁面中心位置		 'bottom' 否
duration number 顯示時間 2000 否

示例：微信小程序

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

});

dialog提示窗

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
title string 標題 '' 否
msg string 提示內容 '' 是
btns arr 按鈕，默認按鈕爲「肯定」 分別可設置btns值爲
1：['按鈕1', '按鈕2']
2：[{name: '按鈕1', color: ''},{name: '按鈕2', color: ''}]		 ["肯定"] 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
theme number 主題樣式，控制模態彈窗按鈕顯示風格(1: 大按鈕; 2: 小按鈕-居右分佈; 3: 按鈕寬度等於父級寬度100%，適用於按鈕文字過多狀況) 'col' 否
items arr prompt--input框列表配置
[{label: '姓名：', type: 'text', value: '(可選)', placeholder: '請輸入姓名'}]		 [] 否
duration number 顯示時間 2000 否
style object {
w: '', //--可選參數，模態窗寬度，默認80%
h: '', //--可選參數，模態窗高度，默認"auto"自適應
bg: '',//--可選參數，模態窗背景色，默認白色
zIndex: '', //--可選參數，模態窗層級
title: {
bg: "",
color: "",
lineHeight: "",
textAlign: "",
fontSize: "",
padding: ""
}}		 '' 否

一、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: "您點擊了肯定"});
    }
});

二、confirm雙按鈕提醒彈窗

aui.confirm({
    msg: "您點擊了confirm雙按鈕模態彈窗！",
    btns: ["取消", "肯定"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您點擊了肯定"});
    }
});

三、delete刪除提醒彈窗

aui.delete({
    msg: "您點擊了delete刪除模態彈窗！",
    btns: ["取消", "刪除"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您點擊了刪除"});
    }
});

四、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: "您點擊了肯定"});
            }
        });
    }
});

五、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: "您點擊了肯定"});
    }
});

六、多按鈕彈窗

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操做表

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
items arr 菜單列表[{name: "", color: "", fontSize: "", textAlign: ""}] [] 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
cancle string 取消按鈕 '' 否
location string 位置
bottom:位於底部，從底部彈出顯示
middle:位於頁面中心位置		 'bottom' 否
theme number 主題樣式(1: 非全屏寬度； 2: 全屏寬度) 1 否

示例:

aui.actionSheet({
    title: '上傳圖片',
    mask: true,
    touchClose: true,
    items: [{
        name: "從相冊選擇",
    },{
        name: "拍照"
    }],
    cancle: "取消",
    theme: 1,
    location: "bottom"
},function(ret){
    console.log(ret.index);				
});

actionmenu分享彈窗

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
items arr 菜單列表[{name: "", icon: "", iconColor: "", img: ""}] [] 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
cancle string 取消按鈕 '' 否
location string 位置
bottom:位於底部，從底部彈出顯示
middle:位於頁面中心位置		 'bottom' 否
theme number 主題樣式(1: 非全屏寬度； 2: 全屏寬度) 1 否 
<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菜單

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
items arr 菜單列表[{name: "", color: "", icon: "iconfont icongfont-right", iconColor: '', img: "", fontSize: "", textAlign: ""}] [] 否
mask boolean 是否顯示遮罩蒙版 false 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
location string 位置
top: 設置彈窗顯示到觸發元素「上」方;
bottom: 設置彈窗顯示到觸發元素「下」方;		 'top' 否 
<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多級聯動

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
title string 標題 '' 否
layer number 控制幾級聯動 1 否
data arr 數據 如：[{text: '', adcode: '', children: [{text: '', adcode: ''}]}] [] 否 
<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廣告彈窗

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
image string 廣告圖片地址 '' 是 
<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側滑菜單

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
content string 側滑菜單元素 '' 是
moves arr 跟隨拖動元素；
[header——頁面頭部, .content——頁面內容部分] (moveType設置爲"all-move" 或 "menu-move"時，此參數必須配置		 [] 是
moveType string ['main-move': '主頁面移動，側滑菜單固定']
['menu-move': '側滑菜單移動，主頁面固定']
['all-move': '主頁面+側滑菜單都移動']		 'main-move' 否
position string 側滑菜單初始化位置，默認位於頁面左側 [left: '左側', right: '右側'] 'left' 否
mask boolean 是否顯示遮罩蒙版 true 否
maskTapClose boolean 觸摸遮罩是否關閉側滑菜單 true 否
speed number 打開、關閉頁面速度[值越大，速度越快] 10 否
drag object {
use: true, //--可選參數，是否開啓拖動打開、關閉菜單[true: 開啓 , false: 關閉]
start: null, //--可選參數，開始拖動回調
move: null, //--可選參數，拖動中回調
end: null, //--可選參數，拖動結束
}		 {} 否
style object 設置樣式 {
w: '80vw',
h: '100vh',
bg: '#333'
}		 否 
<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下拉列表選擇菜單

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
data arr 菜單列表[{value: '', text: ''}] [] 是
layer number 控制組件爲幾級 1 是
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉側滑菜單 true 否
checkedMore boolean 是否多選(多選限制最後一級可多選) false 否
before function 打開彈窗前執行 null 否
select function 一級以上點擊選擇後執行，獲取下級數據並return null 否
style object 樣式 {
width: '',
height: '',
top: '',
left: '',
padding: '',
background: '',
borderRadius: '',
itemStyle:{
textAlign: '',
fontSize: '',
color: '',
isLine: false, //是否顯示分割線
}
}		 否 
<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數字鍵盤

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
type string 類型:
"number"—純數字鍵盤
"point"—帶小數點鍵盤
"idcard"—輸入身份證號鍵盤		 'number' 否
value string 鍵盤輸入值 '' 否
num number 控制小數點後保留兩位 2 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉側滑菜單 true 否 
<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', //一、number | 二、point | 三、idcard
    mask: false,
    value: document.querySelector('#text1').value
}, function(ret){
    console.log(ret);
    document.querySelector('#text1').value = ret.result;
});

chatbox js聊天輸入框

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉側滑菜單 true 否
autoFocus boolean 是否自動獲取焦點 false 否
events arr 配置監聽事件(錄音，選擇附加功能...等事件監聽) [] 否
record object 錄音功能配置 record:
{
use: true, //是否開啓錄音功能
MIN_SOUND_TIME: 800 //錄音最短期限制
}		 否
emotion object 表情功能配置 emotion:
{
use: true, //是否開啓表情功能
path: '' //.json文件路徑
pageHasNum: 27, //一頁顯示按鈕數量(7 * 4 - 1)
}		 否
extras object 附加功能配置 extras:
{
use: true, //是否開啓附加功能
pageHasNum: 8, //一頁顯示按鈕數量(4 * 2)
btns: [ /* {title: '', icon: '', img: ''} */],
}		 
<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})
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程