easyui messager 消息框对话框

秒速五厘米 2021-07-28 18:10 649阅读 0赞

通过 $.messager.defaults 重写默认的 defaults。

消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。

![format_png][]

## 依赖 ##

*  window
 *  linkbutton
 *  progressbar

## 用法 ##

$.messager.alert('Warning','The warning message');
    $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
        if (r){
    		alert('ok');
        }
    });

## 属性 ##

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>类型</th> 
 <th>描述</th> 
 <th>默认值</th> 
 </tr> 
 <tr> 
 <td>ok</td> 
 <td>string</td> 
 <td>确定按钮的文本。</td> 
 <td>Ok</td> 
 </tr> 
 <tr> 
 <td>cancel</td> 
 <td>string</td> 
 <td>取消按钮的文本。</td> 
 <td>Cancel</td> 
 </tr> 
 </tbody> 
</table>

## 方法 ##

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>参数</th> 
 <th>描述</th> 
 </tr> 
 <tr> 
 <td>$.messager.show</td> 
 <td>options</td> 
 <td>在屏幕的右下角显示一个消息窗口，options 参数是一个配置对象： showType： 定义消息窗口如何显示。可用的值是：null、slide、fade、show。默认是 slide。 showSpeed： 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。 width：定义消息窗口的宽度。默认是 250。 height：定义消息窗口的高度。默认是 100。 title：头部面板上显示的标题文本。 msg：要显示的消息文本。 style：定义消息窗口的自定义样式。 timeout：如果定义为 0，除非用户关闭，消息窗口将不会关闭。如果定义为非 0 值，消息窗口将在超时后自动关闭。默认是 4 秒。 代码实例： <pre><code>$.messager.show({
 title: 'My Title',
 msg: 'Message will be closed after 5 seconds.',
 timeout: 5000,
 showType: 'slide'
});
// show message window on top center
$.messager.show({
 title: 'My Title',
 msg: 'Message will be closed after 4 seconds.',
 showType: 'show',
 style: {
 right: '',
 top: document.body.scrollTop + document.documentElement.scrollTop,
 bottom: ''
 }
});</code></pre> </td> 
 </tr> 
 <tr> 
 <td>$.messager.alert</td> 
 <td>title, msg, icon, fn</td> 
 <td>显示一个警告提示窗口。参数： title：显示在头部面板上的标题文本。 msg：要显示的消息文本。 icon：要显示的图标图片。可用的值是：error、question、info、warning。 fn：当窗口关闭时触发的回调函数。 代码实例： <pre><code>$.messager.alert('My Title','Here is a info message!','info');</code></pre> </td> 
 </tr> 
 <tr> 
 <td>$.messager.confirm</td> 
 <td>title, msg, fn</td> 
 <td>显示一个带"确定"和"取消"按钮的确认消息窗口。参数： title：显示在头部面板上的标题文本。 msg：要显示的消息文本。 fn(b)：回调函数，当用户点击确认按钮时传递一个 true 参数给函数，否则给它传递一个 false 参数。 代码实例： <pre><code>$.messager.confirm('Confirm', 'Are you sure to exit this system?',
function(r) {
 if (r) {
 // exit action;
 }
});</code></pre> </td> 
 </tr> 
 <tr> 
 <td>$.messager.prompt</td> 
 <td>title, msg, fn</td> 
 <td>显示一个带"确定"和"取消"按钮的消息窗口，提示用户输入一些文本。参数： title：显示在头部面板上的标题文本。 msg：要显示的消息文本。 fn(val)：带有用户输入的数值参数的回调函数。 代码实例： <pre><code>$.messager.prompt('Prompt', 'Please enter your name:',
function(r) {
 if (r) {
 alert('Your name is:' + r);
 }
});</code></pre> </td> 
 </tr> 
 <tr> 
 <td>$.messager.progress</td> 
 <td>options or method</td> 
 <td> 显示一个进度的消息窗口。 options 定义如下： title：显示在头部面板上的标题文本，默认值是 '' 。 msg：消息框的主体文本，默认值是 '' 。 text：显示在进度条里的文本，默认值是 undefined 。 interval：每次进度更新之间以毫秒为单位的时间长度。默认值是 300。 方法定义如下： bar：获取进度条（progressbar）对象。 close：关闭进度窗口。 代码实例： 显示进度消息窗口。 <pre><code>$.messager.progress();</code></pre> 现在关闭消息窗口。 <pre><code>$.messager.progress('close');</code></pre> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

[format_png]: /images/20210728/522d71f538b4451694f96a255fa21cb0.png