参考资料
官网: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>