EasyUI中Messager消息框的简单使用

心已赠人 2023-10-18 20:08 59阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190619223320455.gif][]

### 属性 ###

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

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <a href="#" class="easyui-linkbutton" onclick="show()">show</a>
    <a href="#" class="easyui-linkbutton" onclick="slide()">slide</a>
    <a href="#" class="easyui-linkbutton" onclick="fade()">fade</a>
    <a href="#" class="easyui-linkbutton" onclick="progress()">progress</a>
    <script type="text/javascript">
        function show() {
            $.messager.show({
                title:"My Title",
                msg:'this is message',
                showType:'show'
            })
        }
    
        function slide() {
            $.messager.show({
                title:"My Title",
                msg:'this is message',
                showType:'slide',
                timeout:5000
            })
        }
    
        function fade() {
            $.messager.show({
                title:"My Title",
                msg:'this is message',
                showType:'fade',
                timeout:0
            })
        }
    
        function progress() {
            $.messager.progress({
                title:"My Title",
                msg:'loading.....',
            });
            setTimeout(function () {
                $.messager.progress("close")
            },3000)
        }
    </script>
    </body>
    </html>

[Image 1]: 
[20190619223320455.gif]: https://img-blog.csdnimg.cn/20190619223320455.gif