EasyUI-Messager

最新推荐文章于 2021-05-25 16:43:35 发布

lazying_bird

最新推荐文章于 2021-05-25 16:43:35 发布

阅读量670

点赞数

分类专栏： Web 文章标签： easyui messager alert prompt confirm

本文链接：https://blog.csdn.net/a_flying_bird/article/details/53574987

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

参考资料

官网：http://www.jeasyui.com/documentation/index.php#, Windows－> Messager

功能

The messager provide different styles of message boxes, including alert, confirm, prompt, progress, etc. All the messager boxes are asynchronous. Users can use the callback function to do something after interacting with messager.

警告、确认、提示、进度等。都是异步。可以定义回调函数。

示例代码

alert()

function myalert() {
  $.messager.alert("Warning", "This warning message.", "question");//error, question, info, warning
}

confirm()

function myconfirm() {
  $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
      if (r){
        alert('you select the OK');
      } else {
        alert('you select the Cancel');
      }
    });
}

prompt()

function myprompt() {
  $.messager.prompt('Prompt', 'Please enter your name:', function(r){
    if (r) {
      alert('Your name is:' + r);
    } else {
      alert('No input.');
    }
  });
}

函数原型

这里没列出show和progress。

alert

四个参数：

title: The title text to be showed on header panel.
msg: The message text to be showed.
icon: The icon image to be showed. Available value are: error, question, info, warning.
fn: The callback function triggered when window closed.

Confirm

三个参数.

Show a confirmation message window with Ok and Cancel buttons. Parameters:

title: The title text to be showed on header panel.
msg: The message text to be showed.
fn(b): The callback function, when user click Ok button, pass a true value to function, otherwise pass a false to it.

Prompt

Show a message window with Ok and Cancel buttons prompting user to enter some text. Parameters:

title: The title text to be showed on header panel.
msg: The message text to be showed.
fn(val): The callback function with a value parameter user entered.

完整HTML示例代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Ajax Example</title>
  <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>

<body>
  <h2>Button example</h2>


  <div>
  <a href="#" class="easyui-linkbutton" onclick="myalert();">Alert</a>
  <a href="#" class="easyui-linkbutton" onclick="myconfirm();">Confirm</a>
  <a href="#" class="easyui-linkbutton" onclick="myprompt();">Prompt</a>
  </div>

  <script type="text/javascript">

    function myalert() {
      $.messager.alert("Warning", "This warning message.", "warning");//error, question, info, warning
    }

    function myconfirm() {
      $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
          if (r){
            alert('you select the OK');
          } else {
            alert('you select the Cancel');
          }
        });
    }

    function myprompt() {
      $.messager.prompt('Prompt', 'Please enter your name:', function(r){
        if (r) {
          alert('Your name is:' + r);
        } else {
          alert('No input.');
        }
      });
    }

  </script>
</body>
</html>