aui移動端UI框架

aui

logo

簡介

aui 是一套基於原生javascript開發的移動端UI框架。包含經常使用js API(如:字符校驗、本地定時存儲、數組對象處理、ajax原生封裝、設備信息獲取、手勢事件...);插件(如:loading加載、dialog模態框、toast消息提示、picker多級聯動...);UI組件(如:button按鈕、tag標籤、card卡片...);經常使用模板(如:側滑菜單、加入購物車動畫、星級評價、圖片上傳預覽裁剪、選項卡...)。javascript

特色

一、標準化,產品化

二、更多複用,更快效率

三、多人協做,更加統一

四、維護方便

五、易於使用

六、減小UI設計時間css

引用


演示

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

文檔

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

代碼

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

api

extend 對象合併(可實現多層對象深度合併)github

參數 類型 描述 默認值 必選
opts Object 原始參數
opt Object 新參數
override Boolean 是否合併重置
   this.aui.extend("原始參數", "新參數", true);



isDefine 判斷字符串是否爲空ajax

參數 類型 描述 默認值 必選
str string 字符串
   this.aui.isDefine(str);



space 刪除字符串中指定字符json

參數 類型 描述 默認值 必選
str string 字符串
flag Boolean 是否去除先後空格[false: 去除先後空格 \ true: 去除所有空格]
   this.aui.space(str, true);



replaceStr 去除字符串中空格小程序

參數 類型 描述 默認值 必選
str string 字符串
assignStr string 指定字符串
   this.aui.replaceStr('原字符串', '指定字符');



uniq 數組去重微信小程序

參數 類型 描述 默認值 必選
array array 去重數組
   this.aui.uniq(array);



getUrlstr 截取URL中參數(可獲取中文內容)

參數 類型 描述 默認值 必選
str string 參數名稱
   this.aui.getUrlstr('id');



random 生成隨機數

參數 類型 描述 默認值 必選
Min number 最小值
Max number 最大值
   this.aui.random(10, 100);



copy 複製到剪切板

參數 類型 描述 默認值 必選
str string 要複製的文本
   this.aui.copy('213421');



checkIsDeveloper 驗證是不是開發者

參數 類型 描述 默認值 必選
isDeveloper Boolean 是不是開發者
   this.aui.checkIsDeveloper(false);



setLocal 本地存儲(可設置存儲時間)

參數 類型 描述 默認值 必選
key string 存儲的名稱
value string 存儲的內容
time number 存儲時間
   this.aui.setLocal('items', items, 1*24*60*60);
   //獲取緩存
   this.aui.getLocal('items');
   //移除緩存,通常狀況不手動調用,緩存過時自動調用
   this.aui.removeLocal('items');
   //清空全部緩存
   this.aui.clearLocal();



import 引入 js / css 文件

參數 類型 描述 默認值 必選
url string / array 文件path
   this.aui.import('aui.js')
   this.aui.import(['aui.js', 'aui.css'])



組件


loading加載動畫

預覽

參數 類型 描述 默認值 必選
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加載:

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

隱藏loading加載:

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: "姓名:" + ret.data[0] + "年齡:" + ret.data[1]+"",
            btns: ["肯定"],
        }, function(ret){
            if(ret.index == 0){
                aui.toast({msg: "您點擊了肯定"});
            }
        });
    }
});

五、confirm帶圖標雙按鈕提醒彈窗

aui.confirm({
    msg: ""
        +""
        +"帶圖標模態彈窗"
    +"",
    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

示例:

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'

示例:

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: ''}]}] []

示例:

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 廣告圖片地址 ''

示例:

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'
}

初始化:

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, //是否顯示分割線
}
}

打開:

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

示例:

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: ''} */],
}


示例:

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})
});
相關文章
相關標籤/搜索