Message 即时消息

简介

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

使用方法

插件运行方式只有一种:

  • js实例:通过new axMessage({参数})方式创建实例运行。
  •                                             <a href="###" class="ax-btn ax-primary" id="btnDft">默认参数</a>
                                            
  •                                             let btnDft = document.querySelector('#btnDft');
                                                btnDft.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                    });
                                                }
                                            

位置

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

  •                                     <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',
                                                    });
                                                }
                                                let btnCT = document.querySelector('#btnCT');
                                                btnCT.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'center-top',
                                                    });
                                                }
                                                let btnRT = document.querySelector('#btnRT');
                                                btnRT.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'right-top',
                                                    });
                                                }
                                    
                                                let btnLC = document.querySelector('#btnLC');
                                                btnLC.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'left-center',
                                                    });
                                                }
                                                let btnCC = document.querySelector('#btnCC');
                                                btnCC.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'center-center',
                                                    });
                                                }
                                                let btnRC = document.querySelector('#btnRC');
                                                btnRC.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'right-center',
                                                    });
                                                }
                                    
                                                let btnLCB = document.querySelector('#btnLB');
                                                btnLB.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'left-bottom',
                                                    });
                                                }
                                                let btnCB = document.querySelector('#btnCB');
                                                btnCB.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'center-bottom',
                                                    });
                                                }
                                                let btnRB = document.querySelector('#btnRB');
                                                btnRB.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        placement:'right-bottom',
                                                    });
                                                }
                                            

风格

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

  •                                     <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',
                                                    });
                                                }
                                                let btnCPL = document.querySelector('#btnCPL');
                                                btnCPL.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        style:'complex',
                                                    });
                                                }
                                            

使用图标

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

  •                                             <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,
                                                    });
                                                }
                                                let btnIconC = document.querySelector('#btnIconC');
                                                btnIconC.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        style:'complex',
                                                        iconShow:true,
                                                    });
                                                }
                                            

结果

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

  • <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,
                    });
                }
                let btnError = document.querySelector('#btnError');
                btnError.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        result: 'error',
                        iconShow:true,
                    });
                }
                let btnWarning = document.querySelector('#btnWarning');
                btnWarning.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        result: 'warning',
                        iconShow:true,
                    });
                }
                let btnInfo = document.querySelector('#btnInfo');
                btnInfo.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        result: 'info',
                        iconShow:true,
                    });
                }
                let btnQuestion = document.querySelector('#btnQuestion');
                btnQuestion.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        result: 'question',
                        iconShow:true,
                    });
                }
                let btnSuccessC = document.querySelector('#btnSuccessC');
                 btnSuccessC.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        style:'complex',
                        result: 'success',
                        iconShow:true,
                    });
                }
                let btnErrorC = document.querySelector('#btnErrorC');
                btnErrorC.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        style:'complex',
                        result: 'error',
                        iconShow:true,
                    });
                }
                let btnWarningC = document.querySelector('#btnWarningC');
                btnWarningC.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        style:'complex',
                        result: 'warning',
                        iconShow:true,
                    });
                }
                let btnInfoC = document.querySelector('#btnInfoC');
                btnInfoC.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        style:'complex',
                        result: 'info',
                        iconShow:true,
                    });
                }
                let btnQuestionC = document.querySelector('#btnQuestionC');
                btnQuestionC.onclick = function () {
                    new axMessage({
                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                        style:'complex',
                        result: 'question',
                        iconShow:true,
                    });
                }
                                            

关闭

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

  •                                             <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: '中华人民共和国,中央人民政府,今天成立啦!',
                                                    });
                                                }
                                                let btnManu = document.querySelector('#btnManu');
                                                btnManu.onclick = function () {
                                                    new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        close:true,
                                                    });
                                                }
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

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

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

  •                                             <a href="###" class="ax-btn ax-primary" id="btnOn">监听</a>
                                            
  •                                             let btnOn = document.querySelector('#btnOn');
                                                btnOn.onclick = function () {
                                                    instanceOn = new axMessage({
                                                        content: '中华人民共和国,中央人民政府,今天成立啦!',
                                                        close: true,
                                                    }).on('shown', function () {
                                                        console.log('已经显示了');
                                                    }).on('hidden', function () {
                                                        console.log('已经隐藏了');
                                                    });
                                                }
                                            

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axMessage({
        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,//延迟关闭时间
        progress: true,//是否显示关闭进度条,仅在complex风格中使用,默认为true
        title: {//设置标题名称,如果simple风格中有内容则不会显示标题,如果没有内容则显示标题
            warning: '操作警告!',
            success: '操作成功!',
            error: '操作失败!',
            question: '操作疑问!',
            info: '信息提示!',
        },
        close: false,//是否显示关闭按钮,默认不显示将自动关闭窗口,可选择true,使用手动点击按钮关闭窗口
        iconShow: false,//是否显示状态图标,默认不显示,可选择true
        style: 'simple',//窗口风格,默认简单风格simple,可选择复杂风格complex
      });
});
                        

操作方法

名称 说明 参数说明 回调函数
init() 初始化 无参数 无回调函数
on(type, handler) 添加监听事件 type是监听事件,事件类型可看前文的:监听方法;handler是回调函数 function(){}
无参数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.options:实例的参数