支持的效果:Alert(弹出询问框),Msg(消息提示),Tip(鼠标经过节点提示),Level(弹出层),Iframe(弹出加载其它页面的层),Mark(记号提示),Loading(加载动画)
原生JS开发,不依赖任何其它第三方组件
开源协议:MIT
第一步:下载安装包放置在网站目录里
第二步:在网页<head></head>标签内引入下面两行代码即可
<script type="text/javascript" src="mayiui/mayiui.js"></script> <link rel="stylesheet" href="mayiui/mayiui.css">
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个显示消息的示例</title> <script type="text/javascript" src="mayiui/mayiui.js"></script> <link rel="stylesheet" href="mayiui/mayiui.css"> </head> <body> <!--正文区域--> <script> mayiui.msg('示例演示'); </script> </body> </html>
这是一个默认隐藏的层,可以使用关闭按钮(本示例右上角的关闭按钮可以自行控制显示与否),也可以不使用,当关闭后默认还是隐藏
mayiui.alert('您好,朋友!');
mayiui.alert('{{content}}',{ mode:{{mode}}, style:'{{style}}', title:'{{title}}', titleColor:'{{titleColor}}', contentColor:'{{contentColor}}', input:'{{input}}', closeButton:{{closeButton}}, button:{{button}}, buttonBig:{{buttonBig}}, ico:'{{ico}}', icoColor:'{{icoColor}}', icoBgColor:'{{icoBgColor}}', mask:{{mask}}, maskClickClose:{{maskClickClose}}, maskBg:'{{maskBg}}', animate:{{animate}}, animateTime:{{animateTime}}, position:{{position}}, deviation:{{deviation}}, time:{{time}}, drag:{{drag}}, zIndex:{{zIndex}}, fontSize:'{{fontSize}}', closeHandler:{{closeHandler}} });
代码格式:mayiui.alert('显示内容',{其它配置});
mayiui.msg('您好,朋友!');
mayiui.msg('{{content}}',{ style:'{{style}}', contentColor:'{{contentColor}}', fontSize:'{{fontSize}}', closeButton:{{closeButton}}, ico:'{{ico}}', icoColor:'{{icoColor}}', icoBgColor:'{{icoBgColor}}', mask:{{mask}}, maskClickClose:{{maskClickClose}}, maskBg:'{{maskBg}}', animate:{{animate}}, animateTime:{{animateTime}}, pi:{{pi}}, position:{{position}}, deviation:{{deviation}}, time:{{time}}, zIndex:{{zIndex}}, closeHandler:{{closeHandler}} });
代码格式:mayiui.msg('显示内容',{其它配置});
mayiui.tip('#tip-top','您好,朋友!');
mayiui.tip({{el}},'{{content}}',{ mode:{{mode}}, style:'{{style}}', contentColor:'{{contentColor}}', fontSize:'{{fontSize}}', animate:{{animate}}, animateTime:{{animateTime}}, position:{{position}}, deviation:{{deviation}}, time:{{time}}, zIndex:{{zIndex}}, closeHandler:{{closeHandler}} });
代码格式:mayiui.tip(附着对象,'显示内容',{其它配置});
mayiui.level('可以填写层里要显示的内容,也可以填写要捕获的层,比如:.divClass,#divId,document.getElementById("divid")',{ title:'演示层名称', size:['600px','400px'] });
mayiui.level('{{content}}',{ style:'{{style}}', title:'{{title}}', titleColor:'{{titleColor}}', closeButton:{{closeButton}}, maximize:{{maximize}}, minimize:{{minimize}}, mask:{{mask}}, maskClickClose:{{maskClickClose}}, maskBg:'{{maskBg}}', animate:{{animate}}, animateTime:{{animateTime}}, position:{{position}}, size:{{size}}, deviation:{{deviation}}, time:{{time}}, drag:{{drag}}, zIndex:{{zIndex}}, closeHandler:{{closeHandler}} });
代码格式:mayiui.level('显示内容或显示的节点对象',{其它配置});
mayiui.iframe('iframe.html',{ title:'演示iframe名称', size:['600px','400px'] });
mayiui.iframe('{{content}}',{ style:'{{style}}', title:'{{title}}', titleColor:'{{titleColor}}', closeButton:{{closeButton}}, maximize:{{maximize}}, minimize:{{minimize}}, mask:{{mask}}, maskClickClose:{{maskClickClose}}, maskBg:'{{maskBg}}', animate:{{animate}}, animateTime:{{animateTime}}, position:{{position}}, size:{{size}}, deviation:{{deviation}}, time:{{time}}, drag:{{drag}}, zIndex:{{zIndex}}, closeHandler:{{closeHandler}}, loadedHandler:{{loadedHandler}} });
代码格式:mayiui.level('网址',{其它配置});
mayiui.mark('#mark-top','88');
mayiui.mark('#mark-top','{{content}}',{ style:'{{style}}', contentColor:'{{contentColor}}', fontSize:'{{fontSize}}', animate:{{animate}}, animateTime:{{animateTime}}, position:{{position}}, deviation:{{deviation}}, size:{{size}}, time:{{time}}, zIndex:{{zIndex}}, closeHandler:{{closeHandler}} });
代码格式:mayiui.level(附着对象,'显示内容',{其它配置});
mayiui.loading({ content:'请稍候...' });
mayiui.loading({ mode:{{mode}}, style:'{{style}}', content:'{{content}}', contentColor:'{{contentColor}}', fontSize:'{{fontSize}}', mask:{{mask}}, maskClickClose:{{maskClickClose}}, maskBg:'{{maskBg}}', animate:{{animate}}, time:{{time}}, zIndex:{{zIndex}}, closeHandler:{{closeHandler}} });
mayiui.close({{style}});
相关代码:mayiui-btn 按钮共用样式,mayiui-btn-blue 定义颜色
<button class="mayiui-btn mayiui-btn-blue">blue</button> <button class="mayiui-btn mayiui-btn-darkgrey">darkgrey</button> <button class="mayiui-btn mayiui-btn-green">green</button> <button class="mayiui-btn mayiui-btn-red">red</button> <button class="mayiui-btn mayiui-btn-cyan">cyan</button> <button class="mayiui-btn mayiui-btn-orange">orange</button> <button class="mayiui-btn mayiui-btn-purple">purple</button> <button class="mayiui-btn mayiui-btn-light">light</button> <button class="mayiui-btn mayiui-btn-black">black</button> <button class="mayiui-btn mayiui-btn-white">white</button> <button class="mayiui-btn mayiui-btn-link">link</button>
相关代码:mayiui-btn-sm 定义小型按钮
<button class="mayiui-btn mayiui-btn-blue mayiui-btn-sm">blue</button> <button class="mayiui-btn mayiui-btn-darkgrey mayiui-btn-sm">darkgrey</button> <button class="mayiui-btn mayiui-btn-green mayiui-btn-sm">green</button> <button class="mayiui-btn mayiui-btn-red mayiui-btn-sm">red</button> <button class="mayiui-btn mayiui-btn-cyan mayiui-btn-sm">cyan</button> <button class="mayiui-btn mayiui-btn-orange mayiui-btn-sm">orange</button> <button class="mayiui-btn mayiui-btn-purple mayiui-btn-sm">purple</button> <button class="mayiui-btn mayiui-btn-light mayiui-btn-sm">light</button> <button class="mayiui-btn mayiui-btn-black mayiui-btn-sm">black</button> <button class="mayiui-btn mayiui-btn-white mayiui-btn-sm">white</button> <button class="mayiui-btn mayiui-btn-link mayiui-btn-sm">link</button>
相关代码:mayiui-btn-lg 定义大型按钮
<button class="mayiui-btn mayiui-btn-blue mayiui-btn-lg">blue</button> <button class="mayiui-btn mayiui-btn-darkgrey mayiui-btn-lg">darkgrey</button> <button class="mayiui-btn mayiui-btn-green mayiui-btn-lg">green</button> <button class="mayiui-btn mayiui-btn-red mayiui-btn-lg">red</button> <button class="mayiui-btn mayiui-btn-cyan mayiui-btn-lg">cyan</button> <button class="mayiui-btn mayiui-btn-orange mayiui-btn-lg">orange</button> <button class="mayiui-btn mayiui-btn-purple mayiui-btn-lg">purple</button> <button class="mayiui-btn mayiui-btn-light mayiui-btn-lg">light</button> <button class="mayiui-btn mayiui-btn-black mayiui-btn-lg">black</button> <button class="mayiui-btn mayiui-btn-white mayiui-btn-lg">white</button> <button class="mayiui-btn mayiui-btn-link mayiui-btn-lg">link</button>
相关代码:mayiui-btn-outlined 定义镂空按钮
<button class="mayiui-btn mayiui-btn-blue mayiui-btn-outlined">blue</button> <button class="mayiui-btn mayiui-btn-darkgrey mayiui-btn-outlined">darkgrey</button> <button class="mayiui-btn mayiui-btn-green mayiui-btn-outlined">green</button> <button class="mayiui-btn mayiui-btn-red mayiui-btn-outlined">red</button> <button class="mayiui-btn mayiui-btn-cyan mayiui-btn-outlined">cyan</button> <button class="mayiui-btn mayiui-btn-orange mayiui-btn-outlined">orange</button> <button class="mayiui-btn mayiui-btn-purple mayiui-btn-outlined">purple</button> <button class="mayiui-btn mayiui-btn-light mayiui-btn-outlined">light</button> <button class="mayiui-btn mayiui-btn-black mayiui-btn-outlined">black</button> <button class="mayiui-btn mayiui-btn-white mayiui-btn-outlined">white</button> <button class="mayiui-btn mayiui-btn-link mayiui-btn-outlined">link</button>
相关代码:mayiui-btn-fillet 定义圆角
<button class="mayiui-btn mayiui-btn-blue mayiui-btn-fillet">blue</button> <button class="mayiui-btn mayiui-btn-darkgrey mayiui-btn-fillet">darkgrey</button> <button class="mayiui-btn mayiui-btn-green mayiui-btn-fillet">green</button> <button class="mayiui-btn mayiui-btn-red mayiui-btn-fillet">red</button> <button class="mayiui-btn mayiui-btn-cyan mayiui-btn-fillet">cyan</button> <button class="mayiui-btn mayiui-btn-orange mayiui-btn-fillet">orange</button> <button class="mayiui-btn mayiui-btn-purple mayiui-btn-fillet">purple</button> <button class="mayiui-btn mayiui-btn-light mayiui-btn-fillet">light</button> <button class="mayiui-btn mayiui-btn-black mayiui-btn-fillet">black</button> <button class="mayiui-btn mayiui-btn-white mayiui-btn-fillet">white</button> <button class="mayiui-btn mayiui-btn-link mayiui-btn-fillet">link</button>
相关代码:mayiui-btn-grid 定义宽度100%
<button class="mayiui-btn mayiui-btn-blue mayiui-btn-grid">blue</button> <button class="mayiui-btn mayiui-btn-darkgrey mayiui-btn-grid">darkgrey</button> <button class="mayiui-btn mayiui-btn-green mayiui-btn-grid">green</button> <button class="mayiui-btn mayiui-btn-red mayiui-btn-grid">red</button> <button class="mayiui-btn mayiui-btn-cyan mayiui-btn-grid">cyan</button> <button class="mayiui-btn mayiui-btn-orange mayiui-btn-grid">orange</button> <button class="mayiui-btn mayiui-btn-purple mayiui-btn-grid">purple</button> <button class="mayiui-btn mayiui-btn-light mayiui-btn-grid">light</button> <button class="mayiui-btn mayiui-btn-black mayiui-btn-grid">black</button> <button class="mayiui-btn mayiui-btn-white mayiui-btn-grid">white</button> <button class="mayiui-btn mayiui-btn-link mayiui-btn-grid">link</button>
Powered by mayiui.com Copyright©ckplayer,2011-2022,苏ICP备17029514号-9