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, }); }
监听事件
本插件有若干监听方法,以on为关键字,实例后监听和在参数中监听效果相同。格式是:instance.on('event',function(){})
;具体事件说明如下:
shown
窗口显示后执行hidden
窗口隐藏后执行
演示实例显示结果使用了console.log方法,请按下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:实例的参数