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

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

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

Alert-弹出询问框

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

Message-弹出消息框

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

Tip-提示框

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

Level-弹出层

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

Iframe-弹出层

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

Mark-提示框

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

Loading-提示框

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}}
});

close-关闭Api

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

Alert-询问组件
Message-消息提示
Tip-提示组件
Level-层组件
Iframe-框架组件
Mark-提示角标组件
Loading-加载组件
Close-关闭Api
附录