easyui 提示框组件_15、Message 消息窗口组件

> Message消息窗口组件依赖于Window(窗口)组件、progressbar(进度条)组件

# 加载方式

> 消息窗口提供了不同的消息框风格，包含 alert(警告框)、confirm(确认框)、prompt(提示框)、progress(进度框)等。所有消息框都是异步的，用户可以在交互消息之后使用回调函数去处理结果。

由于这个组件的特殊性，没有 class 加载方式，全部在 JS 端完成。

# 属性列表

| 属性名 | 值 | 说明|

| --- | --- |

| ok | String | 确认按钮文本。Ok|

| cancel | String | 取消按钮文本。Cancel|

***

```

$(function () {

//属性设置

$.messager.defaults = {"ok":"是","cancel":"否"}

});

```

# 方法列表

| 方法名 | 参数|

| --- |

| $.messager.show | options|

| $.messager.alert title, | msg, icon, fn|

| $.messager.confirm | title, msg, fn|

| $.messager.prompt| title, msg, fn|

| $.messager.progress | options or method|

***

```

$(function () {

//属性设置

$.messager.defaults = {"ok":"是","cancel":"否"}

//使用警告框，四个参数均为可选

//显示警告窗口。参数：

//title：在头部面板显示的标题文本。

//msg：显示的消息文本。

//icon：显示的图标图像。可用值有：error,question,info,warning。

//fn: 在窗口关闭的时候触发该回调函数。

$.messager.alert('警告框','这是一个信息框','info', function () {alert('确认后的回调！');

});

//使用确认框，三个参数均可选

//显示一个包含“确定”和“取消”按钮的确认消息窗口。参数：

//title：在头部面板显示的标题文本。

//msg：显示的消息文本。

//fn(b): 当用户点击“确定”按钮的时侯将传递一个 true 值给回调函数，否则传递一个false 值。

$.messager.confirm('确认对话框','你真的要删除吗？', function (flag) {

if (flag) {

alert('删除成功！');

}

});

//使用提示框，三个参数均可选

//显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数：

//title：在头部面板显示的标题文本。

//msg：显示的消息文本。

//n(val): 在用户输入一个值参数的时候执行的回调函数。

$.messager.prompt('提示信息','请输入你的名字：', function (flag) {

if (flag) {

alert(flag);

}

});

//进度条信息

//属性定义为：

// title：在头部面板显示的标题文本。默认：空。

//msg：显示的消息文本。默认：空。

//text：在进度条上显示的文本。默认：undefined。

//interval：每次进度更新的间隔时间。默认：300 毫秒。

$.messager.progress({

title : '执行中',

msg : '努力加载中...',

text : '{value}%',

interval : 100,

});

//方法定义为：

//bar：获取进度条对象。$.messager.progress('bar');

//close：关闭进度窗口。$.messager.progress('close');

//使用消息框

//在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象：

//showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。

//showSpeed：定义窗口显示的过度时间。默认：600 毫秒。

//width：定义消息窗口的宽度。默认：250px。

//height：定义消息窗口的高度。默认：100px。

//title：在头部面板显示的标题文本。

//msg：显示的消息文本。

//style：定义消息窗体的自定义样式。

//timeout：如果定义为 0，消息窗体将不会自动关闭，除非用户关闭他。

// 如果定义成非0 的树，消息窗体将在超时后自动关闭。默认：4 秒

$.messager.show({

title : '我的消息',

msg : '消息在 5 秒后关闭',

timeout : 5000,

showType : 'slide',

});

//将消息框显示在顶部

$.messager.show({

title : '我的消息',

msg : '消息在 5 秒后关闭',

timeout : 5000,

showType : 'slide',

style:{

top : 0,

}

});

});

```