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 '' noDisplay 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: [,] ["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 [] [] no duration number Display time 2000 no style object } '' 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: [, ], / / 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(); } });
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(); } });
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(); } });
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(); } }); } });
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(); } });
6. Multi button pop up
aui.confirm({ msg: "You clicked the multi button pop-up window!", btns: [,, ], / / optional theme: 3, //Optional },function(ret){ console.log(ret.index); if(ret.index == 0){ aui.toast(); } else if(ret.index == 1){ aui.toast(); } else if(ret.index == 2){ aui.toast(); } });actionsheet parameter type describe Default Mandatory warp string Parent container element 'body' no items arr Menu list [] [] 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 [] [] 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: [ , , , ], 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 [] [] 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: [ , , , ], mask: true, location: 'bottom' },function(ret){ console.log(ret); aui.toast(); })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: []}] [] 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(); }); } })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 {} no style object 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().then(function(ret){ console.log(ret) });