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

Programmer Help

UI Library of aui mobile terminal

aui

brief introduction

characteristic

quote

demonstration

assembly

Loading loading animation

toast message prompt pop-up window

dialog prompt window

actionsheet

actionmenu share Popup

popover menu

picker multi-level linkage

Post ad pop-up

sidemenu sideslip menu

Hot Tags