分类
警告消息框(icon):alert error info question warning
交互消息框:confirm prompt
消息框的显示方式:show slide fade progress
警告消息框
基本用法:$.messager.alert(title, msg, icon, fn)
alert(普通提示)
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"操作成功!"</span><span>,</span><span class="string">"alert"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_1_9639145" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “操作成功!”,”alert”); });或不带“alert”
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"操作成功!"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_2_6302266" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “操作成功!”); });
error(错误)
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"操作失败!"</span><span>,</span><span class="string">"error"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_3_4318182" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “操作失败!”,”error”); });
info(信息)
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"操作成功!"</span><span>,</span><span class="string">"info"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_4_490152" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “操作成功!”,”info”); });
question(疑问)
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"您确定要执行此操作吗!"</span><span>,</span><span class="string">"question"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_5_1014322" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “您确定要执行此操作吗!”,”question”); });
warning(警告)
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"该操作存在风险,请慎重!"</span><span>,</span><span class="string">"warning"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_6_8266087" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “该操作存在风险,请慎重!”,”warning”); });
function的用法
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"该操作存在风险,请慎重!"</span><span>,</span><span class="string">"warning"</span><span>,</span><span class="keyword">function</span><span>(){ </span></span></li><li class="alt"><span> alert(<span class="string">"确定!"</span><span>) </span></span></li><li class=""><span> }); </span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_7_4678819" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “该操作存在风险,请慎重!”,”warning”,function(){ alert(“确定!”) }); });
交互消息框
基本用法:$.messager.confirm(title, msg, fn)
confirm(确认提示框)
- .messager.confirm(</span><span class="string">'提示'</span><span>, </span><span class="string">'请判断是否要执行该操作?'</span><span>, </span><span class="keyword">function</span><span>(b){ </span></span></li><li class=""><span> <span class="keyword">if</span><span> (b){ </span></span></li><li class="alt"><span> alert(<span class="string">'确认'</span><span>); </span></span></li><li class=""><span> }<span class="keyword">else</span><span>{ </span></span></li><li class="alt"><span> alert(<span class="string">'取消'</span><span>); </span></span></li><li class=""><span> } </span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_8_9455349" name="code" class="javascript" style="display: none;">.messager.confirm(‘提示’, ‘请判断是否要执行该操作?’, function(b){ if (b){ alert(‘确认’); }else{ alert(‘取消’); } });
prompt(可输入信息的提示框)
- .messager.prompt(</span><span class="string">'提示'</span><span>, </span><span class="string">'请输入您要输入的内容:'</span><span>, </span><span class="keyword">function</span><span>(r){ </span></span></li><li class=""><span> <span class="keyword">if</span><span> (r){ </span></span></li><li class="alt"><span> alert(<span class="string">'内容: '</span><span>+r); </span></span></li><li class=""><span> } </span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_9_4755267" name="code" class="javascript" style="display: none;">.messager.prompt(‘提示’, ‘请输入您要输入的内容:’, function(r){ if (r){ alert(‘内容: ‘+r); } });
消息框的显示方式
具体显示效果自行实验,具体code如下:
- //显示
- .messager.show({ </span></li><li class="alt"><span> title:<span class="string">'提示'</span><span>, </span></span></li><li class=""><span> msg:<span class="string">'信息提示框将在4秒后关闭.'</span><span>, </span></span></li><li class="alt"><span> showType:<span class="string">'show'</span><span> </span></span></li><li class=""><span>}); </span></li><li class="alt"><span><span class="comment">//从下往上滑出</span><span> </span></span></li><li class=""><span>.messager.show({
- title:’提示’,
- msg:’信息提示框将在5秒后关闭.’,
- timeout:5000,
- showType:’slide’
- });
- //不主动关闭
- .messager.show({ </span></li><li class=""><span> title:<span class="string">'提示'</span><span>, </span></span></li><li class="alt"><span> msg:<span class="string">'信息提示框不会主动关闭.'</span><span>, </span></span></li><li class=""><span> timeout:0, </span></li><li class="alt"><span> showType:<span class="string">'fade'</span><span> </span></span></li><li class=""><span>}); </span></li><li class="alt"><span><span class="comment">//带滚动条等待提示框</span><span> </span></span></li><li class=""><span><span class="keyword">var</span><span> win = .messager.progress({
- title:’请等待’,
- msg:’加载数据中…’
- });
- setTimeout(function(){
- $.messager.progress(’close’);
- },5000)
//显示 $.messager.show({ title:'提示', msg:'信息提示框将在4秒后关闭.', showType:'show' }); //从下往上滑出 $.messager.show({ title:'提示', msg:'信息提示框将在5秒后关闭.', timeout:5000, showType:'slide' }); //不主动关闭 $.messager.show({ title:'提示', msg:'信息提示框不会主动关闭.', timeout:0, showType:'fade' }); //带滚动条等待提示框 var win = $.messager.progress({ title:'请等待', msg:'加载数据中...' }); setTimeout(function(){ $.messager.progress('close'); },5000)
弹出框的位置
- function topLeft(){//上左
- .messager.show({ </span></li><li class="alt"><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class=""><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class="alt"><span> showType:<span class="string">'show'</span><span>, </span></span></li><li class=""><span> style:{ </span></li><li class="alt"><span> right:<span class="string">''</span><span>, </span></span></li><li class=""><span> left:0, </span></li><li class="alt"><span> top:document.body.scrollTop+document.documentElement.scrollTop, </span></li><li class=""><span> bottom:<span class="string">''</span><span> </span></span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span>} </span></li><li class=""><span><span class="keyword">function</span><span> topCenter(){</span><span class="comment">//上中</span><span> </span></span></li><li class="alt"><span> .messager.show({ </span></li><li class=""><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class="alt"><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class=""><span> showType:<span class="string">'slide'</span><span>, </span></span></li><li class="alt"><span> style:{ </span></li><li class=""><span> right:<span class="string">''</span><span>, </span></span></li><li class="alt"><span> top:document.body.scrollTop+document.documentElement.scrollTop, </span></li><li class=""><span> bottom:<span class="string">''</span><span> </span></span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span>} </span></li><li class=""><span><span class="keyword">function</span><span> topRight(){</span><span class="comment">//上右</span><span> </span></span></li><li class="alt"><span> .messager.show({ </span></li><li class=""><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class="alt"><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class=""><span> showType:<span class="string">'show'</span><span>, </span></span></li><li class="alt"><span> style:{ </span></li><li class=""><span> left:<span class="string">''</span><span>, </span></span></li><li class="alt"><span> right:0, </span></li><li class=""><span> top:document.body.scrollTop+document.documentElement.scrollTop, </span></li><li class="alt"><span> bottom:<span class="string">''</span><span> </span></span></li><li class=""><span> } </span></li><li class="alt"><span> }); </span></li><li class=""><span>} </span></li><li class="alt"><span><span class="keyword">function</span><span> centerLeft(){</span><span class="comment">//中左</span><span> </span></span></li><li class=""><span> .messager.show({ </span></li><li class="alt"><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class=""><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class="alt"><span> showType:<span class="string">'fade'</span><span>, </span></span></li><li class=""><span> style:{ </span></li><li class="alt"><span> left:0, </span></li><li class=""><span> right:<span class="string">''</span><span>, </span></span></li><li class="alt"><span> bottom:<span class="string">''</span><span> </span></span></li><li class=""><span> } </span></li><li class="alt"><span> }); </span></li><li class=""><span>} </span></li><li class="alt"><span><span class="keyword">function</span><span> center(){</span><span class="comment">//中间</span><span> </span></span></li><li class=""><span> .messager.show({ </span></li><li class="alt"><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class=""><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class="alt"><span> showType:<span class="string">'fade'</span><span>, </span></span></li><li class=""><span> style:{ </span></li><li class="alt"><span> right:<span class="string">''</span><span>, </span></span></li><li class=""><span> bottom:<span class="string">''</span><span> </span></span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span>} </span></li><li class=""><span><span class="keyword">function</span><span> centerRight(){</span><span class="comment">//中右</span><span> </span></span></li><li class="alt"><span> .messager.show({ </span></li><li class=""><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class="alt"><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class=""><span> showType:<span class="string">'fade'</span><span>, </span></span></li><li class="alt"><span> style:{ </span></li><li class=""><span> left:<span class="string">''</span><span>, </span></span></li><li class="alt"><span> right:0, </span></li><li class=""><span> bottom:<span class="string">''</span><span> </span></span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span>} </span></li><li class=""><span><span class="keyword">function</span><span> bottomLeft(){</span><span class="comment">//下左</span><span> </span></span></li><li class="alt"><span> .messager.show({ </span></li><li class=""><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class="alt"><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class=""><span> showType:<span class="string">'show'</span><span>, </span></span></li><li class="alt"><span> style:{ </span></li><li class=""><span> left:0, </span></li><li class="alt"><span> right:<span class="string">''</span><span>, </span></span></li><li class=""><span> top:<span class="string">''</span><span>, </span></span></li><li class="alt"><span> bottom:-document.body.scrollTop-document.documentElement.scrollTop </span></li><li class=""><span> } </span></li><li class="alt"><span> }); </span></li><li class=""><span>} </span></li><li class="alt"><span><span class="keyword">function</span><span> bottomCenter(){</span><span class="comment">//下中</span><span> </span></span></li><li class=""><span> .messager.show({ </span></li><li class="alt"><span> title:<span class="string">'My Title'</span><span>, </span></span></li><li class=""><span> msg:<span class="string">'The message content'</span><span>, </span></span></li><li class="alt"><span> showType:<span class="string">'slide'</span><span>, </span></span></li><li class=""><span> style:{ </span></li><li class="alt"><span> right:<span class="string">''</span><span>, </span></span></li><li class=""><span> top:<span class="string">''</span><span>, </span></span></li><li class="alt"><span> bottom:-document.body.scrollTop-document.documentElement.scrollTop </span></li><li class=""><span> } </span></li><li class="alt"><span> }); </span></li><li class=""><span>} </span></li><li class="alt"><span><span class="keyword">function</span><span> bottomRight(){</span><span class="comment">//下右</span><span> </span></span></li><li class=""><span> $.messager.show({
- title:’My Title’,
- msg:’The message content’,
- showType:’show’
- });
- }
function topLeft(){//上左 $.messager.show({ title:'My Title', msg:'The message content', showType:'show', style:{ right:'', left:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); } function topCenter(){//上中 $.messager.show({ title:'My Title', msg:'The message content', showType:'slide', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); } function topRight(){//上右 $.messager.show({ title:'My Title', msg:'The message content', showType:'show', style:{ left:'', right:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); } function centerLeft(){//中左 $.messager.show({ title:'My Title', msg:'The message content', showType:'fade', style:{ left:0, right:'', bottom:'' } }); } function center(){//中间 $.messager.show({ title:'My Title', msg:'The message content', showType:'fade', style:{ right:'', bottom:'' } }); } function centerRight(){//中右 $.messager.show({ title:'My Title', msg:'The message content', showType:'fade', style:{ left:'', right:0, bottom:'' } }); } function bottomLeft(){//下左 $.messager.show({ title:'My Title', msg:'The message content', showType:'show', style:{ left:0, right:'', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop } }); } function bottomCenter(){//下中 $.messager.show({ title:'My Title', msg:'The message content', showType:'slide', style:{ right:'', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop } }); } function bottomRight(){//下右 $.messager.show({ title:'My Title', msg:'The message content', showType:'show' }); }
- .messager.prompt(</span><span class="string">'提示'</span><span>, </span><span class="string">'请输入您要输入的内容:'</span><span>, </span><span class="keyword">function</span><span>(r){ </span></span></li><li class=""><span> <span class="keyword">if</span><span> (r){ </span></span></li><li class="alt"><span> alert(<span class="string">'内容: '</span><span>+r); </span></span></li><li class=""><span> } </span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_9_4755267" name="code" class="javascript" style="display: none;">.messager.prompt(‘提示’, ‘请输入您要输入的内容:’, function(r){ if (r){ alert(‘内容: ‘+r); } });
- .messager.confirm(</span><span class="string">'提示'</span><span>, </span><span class="string">'请判断是否要执行该操作?'</span><span>, </span><span class="keyword">function</span><span>(b){ </span></span></li><li class=""><span> <span class="keyword">if</span><span> (b){ </span></span></li><li class="alt"><span> alert(<span class="string">'确认'</span><span>); </span></span></li><li class=""><span> }<span class="keyword">else</span><span>{ </span></span></li><li class="alt"><span> alert(<span class="string">'取消'</span><span>); </span></span></li><li class=""><span> } </span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_8_9455349" name="code" class="javascript" style="display: none;">.messager.confirm(‘提示’, ‘请判断是否要执行该操作?’, function(b){ if (b){ alert(‘确认’); }else{ alert(‘取消’); } });
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"该操作存在风险,请慎重!"</span><span>,</span><span class="string">"warning"</span><span>,</span><span class="keyword">function</span><span>(){ </span></span></li><li class="alt"><span> alert(<span class="string">"确定!"</span><span>) </span></span></li><li class=""><span> }); </span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_7_4678819" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “该操作存在风险,请慎重!”,”warning”,function(){ alert(“确定!”) }); });
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"该操作存在风险,请慎重!"</span><span>,</span><span class="string">"warning"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_6_8266087" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “该操作存在风险,请慎重!”,”warning”); });
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"您确定要执行此操作吗!"</span><span>,</span><span class="string">"question"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_5_1014322" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “您确定要执行此操作吗!”,”question”); });
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"操作成功!"</span><span>,</span><span class="string">"info"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_4_490152" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “操作成功!”,”info”); });
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"操作失败!"</span><span>,</span><span class="string">"error"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_3_4318182" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “操作失败!”,”error”); });
- (</span><span class="keyword">function</span><span> () { </span></span></li><li class=""><span> $.messager.alert(<span class="string">"操作提示"</span><span>, </span><span class="string">"操作成功!"</span><span>); </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre code_snippet_id="398877" snippet_file_name="blog_20140619_2_6302266" name="code" class="javascript" style="display: none;">(function () { $.messager.alert(“操作提示”, “操作成功!”); });