··············EasyUI中messager的学习使用·········
目录
一、基本说明
方法:
名称 | 参数 | 描述 |
---|---|---|
$.messager.show | options | 在屏幕的右下角显示一个消息窗口,options 参数是一个配置对象: |
$.messager.alert | title, msg, icon, fn | 显示一个警告提示窗口。参数: title:显示在头部面板上的标题文本。 msg:要显示的消息文本。 icon:要显示的图标图片。可用的值是:error、question、info、warning。 fn:当窗口关闭时触发的回调函数。 |
$.messager.confirm | title, msg, fn | 显示一个带"确定"和"取消"按钮的确认消息窗口。参数: title:显示在头部面板上的标题文本。 msg:要显示的消息文本。 fn(b):回调函数,当用户点击确认按钮时传递一个 true 参数给函数,否则给它传递一个 false 参数。 |
$.messager.prompt | title, msg, fn | 显示一个带"确定"和"取消"按钮的消息窗口,提示用户输入一些文本。参数: title:显示在头部面板上的标题文本。 msg:要显示的消息文本。 fn(val):带有用户输入的数值参数的回调函数。 |
$.messager.progress | options or method | 显示一个进度的消息窗口。 options 定义如下: title:显示在头部面板上的标题文本,默认值是 '' 。 msg:消息框的主体文本,默认值是 '' 。 text:显示在进度条里的文本,默认值是 undefined 。 interval:每次进度更新之间以毫秒为单位的时间长度。默认值是 300。 方法定义如下: bar:获取进度条(progressbar)对象。 close:关闭进度窗口。 |
属性:
$.messager.defaults方法可自定义消息框的ok按钮和cancel按钮上显示的文字。
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
ok | string | 确定按钮的文本。 | Ok |
cancel | string | 取消按钮的文本。 | Cancel |
二、实例演示
全部代码亲测可行。很多属性其实可以共用的,像style、width、height等,根据个人需求多去试试,就了解了。
(1)$.messager.show
<script type="text/javascript">
$(function(){
//写法一:
$.messager.show({
title:'温馨提示',
msg:'没有设置timeout,小白默认四秒后开溜.',
showType:'show',
style:{//默认右下角,现设置样式在浏览器顶部中间show出
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
//写法二:
$(function(){
var options = {
title:'温馨提示',
msg:'设置了小白五秒后开溜,弹出方式为slide',
showType:'slide',
timeout:5000
};
$.messager.show(options);
});
});
</script>
(2)$.messager.alert
<script type="text/javascript">
$(function(){
//写法一:
$.messager.alert('结果','已完结!','info',function(){
alert("小白要离开了哦!")
});
//写法二:
$.messager.alert({
width: 520,
height: 280,
title: '注意',
msg: '已完结!',
icon: 'warning',
fn: function(){
alert("小白要离开了哦!");
}
});
});
</script>
(3)$.messager.confirm
<script type="text/javascript">
$(function(){
//写法一:
$.messager.confirm('Confirm', '确定吗?', function(b){
if (b){
alert("小白点确定!");
}
});
//写法二:
$.messager.confirm({
title:'Confirm',
msg:'确定吗?',
fn:function(b){
if(b){
alert("小白点确定!");
}
}
});
});
</script>
(4)$.messager.prompt
<script type="text/javascript">
$(function(){
//写法一:
$.messager.prompt('必填','请填写领养小白原因',function(data){
if(data){//判断是否填写内容
alert(data);
}
});
//写法二:
$.messager.prompt({
title:'必填',
msg:'请填写领养小白原因',
fn:function(data){
if(data){//判断是否填写内容
alert(data);
}
}
});
});
</script>
(5)$.messager.progress
<script type="text/javascript">
$(function(){
//显示进度消息窗口。
$.messager.progress();
//写法二:
$.messager.progress({
title:"请等待",
text:"loging..."
});
//五秒后关闭消息窗口。
setTimeout(function(){
$.messager.progress('close');
},5000)
});
</script>
(6)$.messager.defaults
这个方法可以用在上面的方法前面,来改变他们的 ok 和 cancel 的值。简单举个例子
<script type="text/javascript">
$(function(){
$.messager.defaults = { ok: "是" , cancel: "否"};
$.messager.confirm({
width: 360,
height: 180,
title:'Confirm',
msg:'确定吗?',
fn:function(b){
if(b){
alert("小白点确定---》小白点是!");
}
}
});
});
</script>