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
assembly
Loading loading animation
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
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
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
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
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
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
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
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
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) });