Messager(消息窗口)
使用$.iMessager.defaults重写默认值对象。
消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。
依赖关系
用法
javascript
$.iMessager.alert('警告','警告消息');
$.iMessager.confirm('确认','您确认想要删除记录吗?',function(r){
if (r){
alert('确认删除');
}
});1
2
3
4
5
6
2
3
4
5
6
属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| ok | string | 确定按钮文本。 | Ok |
| cancel | string | 取消按钮文本。 | Cancel |
| msg | string | 窗口中显示的消息内容。 | |
| fn | function | 点击确定或取消按钮时的回调函数。 |
方法
对话框窗口的方法扩展自window(窗口),对话框窗口新增的方法如下:
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| $.iMessager.show | options | 在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象: showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。 showSpeed:定义窗口显示的过度时间。默认:600毫秒。 width:定义消息窗口的宽度。默认:250px。 height:定义消息窗口的高度。默认:100px。 title:在头部面板显示的标题文本。 msg:显示的消息文本。 style:定义消息窗体的自定义样式。 timeout:如果定义为0,消息窗体将不会自动关闭,除非用户关闭他。如果定义成非0的树,消息窗体将在超时后自动关闭。默认:4秒。 见下方代码示例。 |
| $.iMessager.alert | title, msg, icon, fn | 显示警告窗口。参数: title:在头部面板显示的标题文本。 msg:显示的消息文本。 icon:显示的图标图像。可用值有:messager-error,messager-question,messager-info,messager-warning。 fn: 在窗口关闭的时候触发该回调函数。 见下方代码示例。 |
| $.iMessager.confirm | title, msg, fn | 显示一个包含"确定"和"取消"按钮的确认消息窗口。参数: title:在头部面板显示的标题文本。 msg:显示的消息文本。 fn(b): 当用户点击"确定"按钮的时侯将传递一个true值给回调函数,否则传递一个false值。 见下方代码示例。 |
| $.iMessager.prompt | title, msg, fn | 显示一个用户可以输入文本的并且带"确定"和"取消"按钮的消息窗体。参数: title:在头部面板显示的标题文本。 msg:显示的消息文本。 fn(val): 在用户输入一个值参数的时候执行的回调函数。 见下方代码示例。 |
| $.iMessager.progress | options or method | 显示一个进度消息窗体。 属性定义为: title:在头部面板显示的标题文本。默认:空。 msg:显示的消息文本。默认:空。 text:在进度条上显示的文本。默认:undefined。 interval:每次进度更新的间隔时间。默认:300毫秒。 方法定义为: bar:获取进度条对象。 close:关闭进度窗口。 见下方代码示例。 |
方法代码示例
$.iMessager.show方法示例:
javascript
$.iMessager.show({
title:'我的消息',
msg:'消息将在5秒后关闭。',
timeout:5000,
showType:'slide'
});
// 消息将显示在顶部中间
$.iMessager.show({
title:'我的消息',
msg:'消息将在4秒后关闭。',
showType:'show',
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.iMessager.alert方法示例:
javascript
$.iMessager.alert('我的消息','这是一个提示信息!','messager-info');1
$.iMessager.confirm方法示例:
javascript
$.iMessager.confirm('确认对话框', '您想要退出该系统吗?', function(r){
if (r){
// 退出操作;
}
});1
2
3
4
5
2
3
4
5
$.iMessager.prompt方法示例:
javascript
$.iMessager.prompt('提示信息', '请输入你的姓名:', function(r){
if (r){
alert('你的姓名是:' + r);
}
});1
2
3
4
5
2
3
4
5
$.iMessager.progress方法示例:
显示进度消息窗口:
javascript
$.iMessager.progress();1
关闭进度消息窗口:
javascript
$.iMessager.progress('close');1