easyui 消息框

最新推荐文章于 2021-02-20 11:13:08 发布

菜鸟Q_Q

最新推荐文章于 2021-02-20 11:13:08 发布

阅读量412

点赞数

分类专栏： easyui-教程

easyui-教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

分类

警告消息框（icon）：alert error info question warning

交互消息框：confirm prompt

消息框的显示方式：show slide fade progress

警告消息框

基本用法：$.messager.alert(title, msg, icon, fn)

alert（普通提示）

[javascript] view plain copy

print ?

(function () {  </li><li class="">         $.messager.alert("操作提示", "操作成功！","alert");  </li><li class="alt">});  </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”
[javascript] view plain copy
print ?
1. (function () {  </li><li class="">         $.messager.alert("操作提示", "操作成功！");  </li><li class="alt">});  </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（错误）
 [javascript] view plain copy
 print ?
 1. $(function () {  </li><li class="">     $.messager.alert("操作提示", "操作失败！","error");  </li><li class="alt">});  </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（信息）
 
 [javascript] view plain copy
 print ?
 
 $(function () {  </li><li class="">      $.messager.alert("操作提示", "操作成功！","info");  </li><li class="alt">});  </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（疑问）
 
 [javascript] view plain copy
 print ?
 
 $(function () {  </li><li class="">      $.messager.alert("操作提示", "您确定要执行此操作吗！","question");  </li><li class="alt">});  </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（警告）
 
 [javascript] view plain copy
 print ?
 
 $(function () {  </li><li class="">     $.messager.alert("操作提示", "该操作存在风险，请慎重！","warning");  </li><li class="alt">});  </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的用法
 
 [javascript] view plain copy
 print ?
 
 $(function () {  </li><li class="">    $.messager.alert("操作提示", "该操作存在风险，请慎重！","warning",function(){  </li><li class="alt">         alert("确定！")  </li><li class="">    });  </li><li class="alt">});  </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（确认提示框）
 
 [javascript] view plain copy
 print ?
 
 $.messager.confirm('提示', '请判断是否要执行该操作?', function(b){  </li><li class="">      if (b){  </li><li class="alt">            alert('确认');  </li><li class="">      }else{  </li><li class="alt">            alert('取消');  </li><li class="">      }  </li><li class="alt">});  </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（可输入信息的提示框）
 
 [javascript] view plain copy
 print ?
 
 $.messager.prompt('提示', '请输入您要输入的内容：', function(r){  </li><li class="">    if (r){  </li><li class="alt">        alert('内容: '+r);  </li><li class="">    }  </li><li class="alt">});  </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如下：
 
 [javascript] view plain copy
 print ?
 
 //显示
 $.messager.show({  </li><li class="alt">    title:'提示',  </li><li class="">    msg:'信息提示框将在4秒后关闭.',  </li><li class="alt">    showType:'show'  </li><li class="">});  </li><li class="alt">//从下往上滑出  </li><li class="">$ .messager.show({
 title:’提示’,
 msg:’信息提示框将在5秒后关闭.’,
 timeout:5000,
 showType:’slide’
 });
 //不主动关闭
 $.messager.show({  </li><li class="">    title:'提示',  </li><li class="alt">    msg:'信息提示框不会主动关闭.',  </li><li class="">    timeout:0,  </li><li class="alt">    showType:'fade'  </li><li class="">});  </li><li class="alt">//带滚动条等待提示框  </li><li class="">var 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)
 
 弹出框的位置
 
 [javascript] view plain copy
 print ?
 
 function topLeft(){//上左
 $.messager.show({  </li><li class="alt">        title:'My Title',  </li><li class="">        msg:'The message content',  </li><li class="alt">        showType:'show',  </li><li class="">        style:{  </li><li class="alt">            right:'',  </li><li class="">            left:0,  </li><li class="alt">            top:document.body.scrollTop+document.documentElement.scrollTop,  </li><li class="">            bottom:''  </li><li class="alt">        }  </li><li class="">    });  </li><li class="alt">}  </li><li class="">function topCenter(){//上中  </li><li class="alt">    $ .messager.show({  </li><li class="">        title:'My Title',  </li><li class="alt">        msg:'The message content',  </li><li class="">        showType:'slide',  </li><li class="alt">        style:{  </li><li class="">            right:'',  </li><li class="alt">            top:document.body.scrollTop+document.documentElement.scrollTop,  </li><li class="">            bottom:''  </li><li class="alt">        }  </li><li class="">    });  </li><li class="alt">}  </li><li class="">function topRight(){//上右  </li><li class="alt">     $.messager.show({  </li><li class="">        title:'My Title',  </li><li class="alt">        msg:'The message content',  </li><li class="">        showType:'show',  </li><li class="alt">        style:{  </li><li class="">            left:'',  </li><li class="alt">            right:0,  </li><li class="">            top:document.body.scrollTop+document.documentElement.scrollTop,  </li><li class="alt">            bottom:''  </li><li class="">        }  </li><li class="alt">    });  </li><li class="">}  </li><li class="alt">function centerLeft(){//中左  </li><li class="">    $ .messager.show({  </li><li class="alt">        title:'My Title',  </li><li class="">        msg:'The message content',  </li><li class="alt">        showType:'fade',  </li><li class="">        style:{  </li><li class="alt">            left:0,  </li><li class="">            right:'',  </li><li class="alt">            bottom:''  </li><li class="">        }  </li><li class="alt">    });  </li><li class="">}  </li><li class="alt">function center(){//中间  </li><li class="">     $.messager.show({  </li><li class="alt">        title:'My Title',  </li><li class="">        msg:'The message content',  </li><li class="alt">        showType:'fade',  </li><li class="">        style:{  </li><li class="alt">            right:'',  </li><li class="">            bottom:''  </li><li class="alt">        }  </li><li class="">    });  </li><li class="alt">}  </li><li class="">function centerRight(){//中右  </li><li class="alt">    $ .messager.show({  </li><li class="">        title:'My Title',  </li><li class="alt">        msg:'The message content',  </li><li class="">        showType:'fade',  </li><li class="alt">        style:{  </li><li class="">            left:'',  </li><li class="alt">            right:0,  </li><li class="">            bottom:''  </li><li class="alt">        }  </li><li class="">    });  </li><li class="alt">}  </li><li class="">function bottomLeft(){//下左  </li><li class="alt">     $.messager.show({  </li><li class="">        title:'My Title',  </li><li class="alt">        msg:'The message content',  </li><li class="">        showType:'show',  </li><li class="alt">        style:{  </li><li class="">            left:0,  </li><li class="alt">            right:'',  </li><li class="">            top:'',  </li><li class="alt">            bottom:-document.body.scrollTop-document.documentElement.scrollTop  </li><li class="">        }  </li><li class="alt">    });  </li><li class="">}  </li><li class="alt">function bottomCenter(){//下中  </li><li class="">    $ .messager.show({  </li><li class="alt">        title:'My Title',  </li><li class="">        msg:'The message content',  </li><li class="alt">        showType:'slide',  </li><li class="">        style:{  </li><li class="alt">            right:'',  </li><li class="">            top:'',  </li><li class="alt">            bottom:-document.body.scrollTop-document.documentElement.scrollTop  </li><li class="">        }  </li><li class="alt">    });  </li><li class="">}  </li><li class="alt">function bottomRight(){//下右  </li><li class="">    $.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' }); }

菜鸟Q_Q

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
easyui 消息框

分类警告消息框（icon）：alert error info question warning交互消息框：confirm prompt消息框的显示方式：show slide fade progress警告消息框基本用法：$.messager.alert(title, msg, icon, fn)alert（普通提示）[javascript] view plain copy print?(
复制链接

扫一扫