Message 即时消息

简介

即时消息通常用在系统报错和表单提示中，是开发管理系统中必然使用的插件。

使用方法

插件运行方式只有一种：

js实例：通过new axMessage({参数})方式创建实例运行。

默认参数

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnDft">默认参数</a>

                                            let btnDft = document.querySelector('#btnDft');
                                            btnDft.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                }).show();
                                            }

位置

通过设定placement参数来改变信息窗口弹出的位置。

left-top center-top right-top

left-center center-center right-center

left-bottom center-bottom right-bottom

HTML JS

                                    <a href="###" class="ax-btn ax-primary" id="btnLT">left-top</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCT">center-top</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnRT">right-top</a>

                                    <a href="###" class="ax-btn ax-primary" id="btnLC">left-center</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCC">center-center</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnRC">right-center</a>

                                    <a href="###" class="ax-btn ax-primary" id="btnLB">left-bottom</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCB">center-bottom</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnRB">right-bottom</a>

                                            let btnLT = document.querySelector('#btnLT');
                                            btnLT.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'left-top',
                                                }).show();
                                            }
                                            let btnCT = document.querySelector('#btnCT');
                                            btnCT.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'center-top',
                                                }).show();
                                            }
                                            let btnRT = document.querySelector('#btnRT');
                                            btnRT.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'right-top',
                                                }).show();
                                            }
                                
                                            let btnLC = document.querySelector('#btnLC');
                                            btnLC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'left-center',
                                                }).show();
                                            }
                                            let btnCC = document.querySelector('#btnCC');
                                            btnCC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'center-center',
                                                }).show();
                                            }
                                            let btnRC = document.querySelector('#btnRC');
                                            btnRC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'right-center',
                                                }).show();
                                            }
                                
                                            let btnLCB = document.querySelector('#btnLB');
                                            btnLB.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'left-bottom',
                                                }).show();
                                            }
                                            let btnCB = document.querySelector('#btnCB');
                                            btnCB.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'center-bottom',
                                                }).show();
                                            }
                                            let btnRB = document.querySelector('#btnRB');
                                            btnRB.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'right-bottom',
                                                }).show();
                                            }

风格

通过设置style参数来改变消息窗口风格，默认是simple，可选择complex。

simple风格 complex风格

HTML JS

                                    <a href="###" class="ax-btn ax-primary" id="btnSPL">simple风格</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCPL">complex风格</a>

                                            let btnSPL = document.querySelector('#btnSPL');
                                            btnSPL.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'simple',
                                                }).show();
                                            }
                                            let btnCPL = document.querySelector('#btnCPL');
                                            btnCPL.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'complex',
                                                }).show();
                                            }

使用图标

通过设置iconShow参数控制是否显示图标。默认false不显示，可设置true显示。

simple风格的图标 complex风格的图标

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnIconS">simple风格的图标</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnIconC">complex风格的图标</a>

                                            let btnIconS = document.querySelector('#btnIconS');
                                            btnIconS.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'simple',
                                                    iconShow:true,
                                                }).show();
                                            }
                                            let btnIconC = document.querySelector('#btnIconC');
                                            btnIconC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'complex',
                                                    iconShow:true,
                                                }).show();
                                            }

结果

信息提示一共有五个结果，通过result参数设置结果类型，分别是success、error、warning、info（默认）和question

success error warning info question

success(complex) error(complex) warning(complex) info(complex) question(complex)

HTML JS

<a href="###" class="ax-btn ax-primary" id="btnSuccess">success</a>
<a href="###" class="ax-btn ax-primary" id="btnError">error</a>
<a href="###" class="ax-btn ax-primary" id="btnWarning">warning</a>
<a href="###" class="ax-btn ax-primary" id="btnInfo">info</a>
<a href="###" class="ax-btn ax-primary" id="btnQuestion">question</a>
<a href="###" class="ax-btn ax-primary" id="btnSuccessC">success(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnErrorC">error(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnWarningC">warning(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnInfoC">info(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnQuestionC">question(complex)</a>

            let btnSuccess = document.querySelector('#btnSuccess');
             btnSuccess.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'success',
                    iconShow:true,
                }).show();
            }
            let btnError = document.querySelector('#btnError');
            btnError.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'error',
                    iconShow:true,
                }).show();
            }
            let btnWarning = document.querySelector('#btnWarning');
            btnWarning.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'warning',
                    iconShow:true,
                }).show();
            }
            let btnInfo = document.querySelector('#btnInfo');
            btnInfo.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'info',
                    iconShow:true,
                }).show();
            }
            let btnQuestion = document.querySelector('#btnQuestion');
            btnQuestion.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'question',
                    iconShow:true,
                }).show();
            }
            let btnSuccessC = document.querySelector('#btnSuccessC');
             btnSuccessC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'success',
                    iconShow:true,
                }).show();
            }
            let btnErrorC = document.querySelector('#btnErrorC');
            btnErrorC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'error',
                    iconShow:true,
                }).show();
            }
            let btnWarningC = document.querySelector('#btnWarningC');
            btnWarningC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'warning',
                    iconShow:true,
                }).show();
            }
            let btnInfoC = document.querySelector('#btnInfoC');
            btnInfoC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'info',
                    iconShow:true,
                }).show();
            }
            let btnQuestionC = document.querySelector('#btnQuestionC');
            btnQuestionC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'question',
                    iconShow:true,
                }).show();
            }

关闭

默认自动关闭，如果需要可使用手动关闭。通过设置close参数控制是否手动关闭。默认false自动，可设置true手动。

自动关闭手动关闭

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnAuto">自动关闭</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnManu">手动关闭</a>

                                            let btnAuto = document.querySelector('#btnAuto');
                                            btnAuto.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                }).show();
                                            }
                                            let btnManu = document.querySelector('#btnManu');
                                            btnManu.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    close:true,
                                                }).show();
                                            }

操作方法

本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。

内部成员变量如下：

this.shown：当前是否是展示状态，true/false
this.wrapperDom：包裹一个方向的小窗父节点
this.targetDom：小窗节点
this.contentDom：主体内容节点
this.titleDom：标题节点
this.closeDom：关闭按钮节点
this.progressDom：关闭进度条节点

内部操作方法如下：

this.show(callback)：打开提示小窗，支持一个参数即回调函数，回调无参数
this.hide(callback)：关闭提示小窗，支持一个参数即回调函数，回调无参数
this.update(setting,callback)：更新小窗，支持两个参数即传入的参数和回调函数，回调无参数

打开关闭更新

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnShow">打开</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnHide">关闭</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnUpdate">更新</a>

                                            let btnShow = document.querySelector('#btnShow'),
                                                btnHide = document.querySelector('#btnHide'),
                                                btnUpdate = document.querySelector('#btnUpdate'),
                                                methodIns = new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    close: true,
                                                });
                                            btnShow.onclick = function () {
                                                methodIns.show();
                                            }
                                            btnHide.onclick = function () {
                                                methodIns.hide();
                                            }
                                            btnUpdate.onclick = function () {
                                                methodIns.update({
                                                    result: 'success',
                                                    content: '现在是2023年，国家一天天变得强大！',
                                                });
            }

监听事件

本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：

shown 窗口显示后执行
hidden 窗口隐藏后执行

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

监听

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnOn">监听</a>

                                            let btnOn = document.querySelector('#btnOn');
                                            btnOn.onclick = function () {
                                                instanceOn = new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    close: true,
                                                }).show().on('shown', function () {
                                                    console.log('已经显示了');
                                                }).on('hidden', function () {
                                                    console.log('已经隐藏了');
                                                });
                                            }

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axMessage({
        insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
        className: '',//自定义类名，默认为空，注意不需要使用‘.’
        placement: 'center-top',//弹出位置，默认中间顶部，可选择left-top|center-top|right-top|left-center|center-center|right-center|left-bottom|center-bottom|right-bottom
        content: '',//窗口内容，如果为空则插件根据窗口类型自动填入内容，可自定义窗口内容
        result: 'info',//操作状态，默认提示info，可选择success|error|question|warning
        delay: 3000,//延迟关闭时间
        zIndex:0,//气泡层级，默认为0即不设置，如果与其他组件发生遮挡请自行设置
        progress: true,//是否显示关闭进度条，仅在complex风格中使用，默认为true
        title: {//设置标题名称
            warning: '操作警告！',
            success: '操作成功！',
            error: '操作失败！',
            question: '操作疑问！',
            info: '信息提示！',
        },
        close: false,//是否显示关闭按钮，默认不显示将自动关闭窗口，可选择true，使用手动点击按钮关闭窗口
        iconShow: false,//是否显示状态图标，默认不显示，可选择true
        style: 'simple',//窗口风格，默认简单风格simple，可选择复杂风格complex
        icon: '',//图标代码，不需要另行设置
        breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
        onShown:'',//回调函数，打开小窗后执行，无参数
        onHidden:'',//回调函数，关闭小窗后执行，无参数
        onUpdated:'',//回调函数，更新参数后执行，无参数
      });
});

以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"