mayiui

mayiui通过简单配置即可实现许多网页效果

支持的效果:Alert(弹出询问框),Msg(消息提示),Tip(鼠标经过节点提示),Level(弹出层),Iframe(弹出加载其它页面的层),Mark(记号提示),Loading(加载动画)

原生JS开发,不依赖任何其它第三方组件
开源协议:MIT

下载地址

更新日期:2023.09.15

第一步:下载安装包放置在网站目录里

第二步:在网页<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>

演示Level

这是一个默认隐藏的层,可以使用关闭按钮(本示例右上角的关闭按钮可以自行控制显示与否),也可以不使用,当关闭后默认还是隐藏

以下的内容是为了方便您快速获取想要的样式而设置,通过左边的相关配置,右侧实时生成相关的代码,注意:使用复制按钮可以复制到最简洁的代码

ms
px
ms,0=不关闭
0=自动

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('显示内容',{其它配置});

ms
px
ms,-1=不关闭,0=自动
0=自动

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('显示内容',{其它配置});

ms
px
ms,-1=不关闭,0=自动
0=自动

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(附着对象,'显示内容',{其它配置});

ms
示例['90%','90%'],['600px','400px']
px
ms,-1=不关闭,0=自动
0=自动

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('显示内容或显示的节点对象',{其它配置});

ms
示例['90%','90%'],['600px','400px']
px
ms,-1=不关闭,0=自动
0=自动

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('网址',{其它配置});

ms
px
示例['30px','30px']
ms,-1=不关闭,0=自动
0=自动

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(附着对象,'显示内容',{其它配置});

ms,-1=不关闭,0=自动
0=自动

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.css的页面中可以直接使用下面的代码使用按钮

相关代码: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