UI Library of aui mobile terminal

aui

brief introduction

aui is a set of mobile UI library developed based on native javascript, including common js methods, character verification, dialog prompt pop-up window, sideslip menu, time selector, multi-level linkage, chat UI, project common templates

characteristic

1. Standardization, productization
2. More reuse, faster efficiency
3. More people work together, more unified
4. Easy to maintain
5. Easy to use
6. Reduce UI design time

quote

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

demonstration

View demo

assembly

Loading loading animation

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
type number 1: Common style; 2: display loading animation in the button after clicking the button; 3: four box rotation; 4: animation of dot amplification and reduction (over loading animation for the first time in the full screen); 5: over loading animation of dot background - wechat applet effect (over loading animation for the first time in the full screen) 1 no
msg string Prompt content '' no
mask boolean Show mask mask or not true no
direction string Horizontal ("row") or vertical ("col") control 'col' no
theme number When type=3, control full screen or small window display (1: small window; 2: full screen) 1 no
style object {bg: 'background', color: 'text color', maskBg: 'mask layer color', zIndex: 'level'} '' no

Display loading:

aui.showload({
    msg: "Loading"
});

Hide loading:

aui.hideload();

toast message prompt pop-up window

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
msg string Prompt content '' yes
icon string Icon '' no
direction string Horizontal ("row") or vertical ("col") control 'col' no
location string (configurable if the icon parameter is not configured) location bottom: at the bottom, pop-up display middle: at the center of the page 'bottom' no
duration number Display time 2000 no

Example:

aui.toast({
    icon: "../../img/success.png",
    msg: "Payment succeeded!",
    direction: "col"
},function(ret){

});

dialog prompt window

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
title string title '' no
msg string Prompt content '' yes
btns arr Button. If the default button is OK, the btns value can be set to 1: ['button 1', 'button 2'] 2: [{name: 'button 1', color: ''},{name: 'button 2', color: ''}] ["OK"] no
mask boolean Show mask mask or not true no
touchClose boolean Touch whether the mask closes the modal pop-up window true no
theme number Theme style, control the display style of modal pop-up button (1: large button; 2: small button - right distribution; 3: button width is equal to 100% of the parent width, applicable to the case of too much button text) 'col' no
items arr prompt--input box list configuration [{label: 'Name:', type: 'text', value: '(optional),' placeholder: 'please enter name'}] [] no
duration number Display time 2000 no
style object {w: '', / / -- optional parameter, modal window width, default 80% H: '', / / -- optional parameter, modal window height, default "auto" adaptive bg: '', / -- optional parameter, modal window background color, default white zIndex: '', / -- optional parameter, modal window level animation: '', / -- optional parameter, display animation Title: {bg: '', color: '', lineheight: '', textAlign: "", fontSize: "", padding: ""}} '' no

1. alert single button reminder pop-up

aui.alert({
    title: "Tips", //Optional
    msg: "You clicked alert Single button mode popup!",
    mask: true,
    touchClose: true, //Optional
    btns: ["determine"], //Optional
    //Or btns: [{name: 'button 1', color: 'F00'}, {Name: 'button 2', color: 'f00f'}], / / optional
    theme: 1, //Optional
    style: { //Optional
        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: "You clicked OK"});
    }
});

2. confirm double button reminder pop-up

aui.confirm({
    msg: "You clicked confirm Double button mode popup!",
    btns: ["cancel", "determine"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "You clicked OK"});
    }
});

3. Delete delete reminder pop-up

aui.delete({
    msg: "You clicked delete Delete modal pop-up!",
    btns: ["cancel", "delete"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "You clicked delete"});
    }
});

4. prompt input pop-up window

aui.prompt({
    items: [{
        label: 'full name:', 
        type: 'text', 
        value: '', 
        placeholder: 'Please enter a name'
    },{
        label: 'Age:', 
        type: 'number', 
        value: '', 
        placeholder: 'Please enter age'
    }],
    btns: ["cancel", "determine"],
},function(ret){
    console.log(ret.data);	
    if(ret.index == 1)
    {
        aui.alert({
            title: "Input results:",
            msg: "<div style='text-align: left;'>full name:" + ret.data[0] + "</br>Age:" + ret.data[1]+"</div>",
            btns: ["determine"],
        }, function(ret){
            if(ret.index == 0){
                aui.toast({msg: "You clicked OK"});
            }
        });
    }
});

5. confirm with icon double button reminder pop-up window

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;'>Pop up window with icon mode</p>"
    +"</div>",
    btns: ["cancel", "determine"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "You clicked OK"});
    }
});

6. Multi button pop up

aui.confirm({
    msg: "You clicked the multi button pop-up window!",
    btns: [{name: 'Cruel refusal', color: ''},{name: 'Go again', color: ''}, {name: "Back to home", color: "#9090 "}], / / optional
    theme: 3, //Optional
},function(ret){
    console.log(ret.index);	
    if(ret.index == 0){
        aui.toast({msg: "You click cruel refusal"});
    }
    else if(ret.index == 1){
        aui.toast({msg: "If you click, you can have a look"});
    }
    else if(ret.index == 2){
        aui.toast({msg: "You click to return to the home page"});
    }
});

actionsheet

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
items arr Menu list [{name: "", color: "", fontSize: "", textAlign: ""}] [] no
mask boolean Show mask mask or not true no
touchClose boolean Touch whether the mask closes the modal pop-up window true no
cancle string Cancel button '' no
location string Location bottom: at the bottom, pop up the middle: at the center of the page 'bottom' no
theme number Theme style (1: non full screen width; 2: full screen width) 1 no

Example:

aui.actionSheet({
    title: 'Upload picture',
    mask: true,
    touchClose: true,
    items: [{
        name: "Select from the album",
    },{
        name: "photograph"
    }],
    cancle: "cancel",
    theme: 1,
    location: "bottom"
},function(ret){
    console.log(ret.index);				
});

actionmenu share Popup

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
items arr Menu list [{name: "", icon: "", iconColor: "", img: ""}] [] no
mask boolean Show mask mask or not true no
touchClose boolean Touch whether the mask closes the modal pop-up window true no
cancle string Cancel button '' no
location string Location bottom: at the bottom, pop up the middle: at the center of the page 'bottom' no
theme number Theme style (1: non full screen width; 2: full screen width) 1 no
<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>

Example:

aui.actionMenu({
    title: 'Share to',
    mask: true,
    touchClose: true,
    items: [
        {name: "WeChat", img: "../../img/weixin.png"},
        {name: "Wechat Moments", img: "../../img/pengyouquan.png"},
        {name: "QQ", img: "../../img/QQ.png"},
        {name: "micro-blog", img: "../../img/weibo.png"}
    ],
    cancle: "cancel",
    theme: 1,
    location: "bottom"
},function(ret){
    console.log(ret.index);				
});

popover menu

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
items arr Menu list [{Name: "", color: "", Icon: "" iconcont icongfont right "", iconcolor: "", IMG: "", fontsize: "", textalign: ""}] [] no
mask boolean Show mask mask or not false no
touchClose boolean Touch whether the mask closes the modal pop-up window true no
location string Position top: set the pop-up window to display on the "up" side of the triggering element; bottom: set the pop-up window to display on the "down" side of the triggering element; 'top' no
<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>

Example:

aui.popover.open({
    warp: '.aui-header-right',
    items: [
        {name: 'WeChat', img: '../../img/weixin.png'},
        {name: 'Wechat Moments', img: '../../img/pengyouquan.png'},
        {name: 'QQ', img: '../../img/QQ.png'},
        {name: 'micro-blog', img: '../../img/weibo.png'}
    ],
    mask: true,
    location: 'bottom'
},function(ret){
    console.log(ret);
    aui.toast({msg: ret.el.querySelector("span").innerHTML});
})	

picker multi-level linkage

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
title string title '' no
layer number Control several levels of linkage 1 no
data arr Data such as: [{text: '', adcode: '', children: [{text: '', adcode: ''}]}] [] no
<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>

Example:

aui.picker.open({
    title: 'Select area',
    layer: 3,
    data: cityData, //City data
    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});						
        });						
    }
})

Post ad pop-up

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
mask boolean Show mask mask or not true no
touchClose boolean Touch whether the mask closes the modal pop-up window true no
image string Advertising image address '' yes
<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>

Example:

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

sidemenu sideslip menu

preview

parameter type describe Default Mandatory
warp string Parent container element 'body' no
content string Sideslip menu elements '' yes
moves arr Follow the drag element; [header - page header,. Content - page content section] (when the moveType is set to "all move" or "menu move", this parameter must be configured [] yes
moveType string ['main move ':' main page moves, side sliding menu is fixed '] ['Menu move': 'side sliding menu moves, main page is fixed'] ['All move ':' main page + side sliding menu moves'] 'main-move' no
position string Initialization position of sideslip menu, which is on the left side of the page by default [left: 'left', right: 'right'] 'left' no
mask boolean Show mask mask or not true no
maskTapClose boolean Touch the mask to close the sideslip menu true no
speed number Speed of opening and closing pages [the higher the value, the faster the speed] 10 no
drag object {use: true, / / -- optional parameter, enable drag to open and close menu [true: open, false: Close] start: null, / / -- optional parameter, start drag callback move: null, / -- optional parameter, in drag callback end: null, / -- optional parameter, drag end} {} no
style object {w: '80vw',h: '100vh',bg: '#333'} {w: '80vw', h: '100vh', bg: '#333'} no
<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>

initialization:

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)
});

Set configuration data:

aui.sidemenu.setData({ //Set configuration data
	position: 'left',
	moveType: 'main-move'
}).then(function(ret){
	//console.log(ret)
});

To open the sideslip menu:

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

To close the sideslip menu:

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

Tags: Javascript github Mobile

Posted on Thu, 14 May 2020 01:18:00 -0400 by KRAK_JOE