jQueryEasyUI Messager基本使用

本文轉載自查看原文 2016-05-25 11:49 2303

1、$.messager.alert(title, msg, icon, fn)
1>、基本用法

代碼：

Html代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>消息提示框</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.messager.alert("操作提示", "操作成功！");
});
</script>
</head>
<body>
</body>
</html>

效果圖：

2>、icon使用

icon四種設置："error"、"info"、"question"、"warning"
效果：

Js代碼

<script type="text/javascript">
$(function () {
$.messager.alert("操作提示", "操作成功！","info");
});
</script>

Js代碼

<script type="text/javascript">
$(function () {
$.messager.alert("操作提示", "操作失敗！","error");
});
</script>

Js代碼

<script type="text/javascript">
$(function () {
$.messager.alert("操作提示", "您確定要執行操作嗎！","question");
});
</script>

Js代碼

<script type="text/javascript">
$(function () {
$.messager.alert("操作提示", "您確定要執行操作嗎！","warning");
});
</script>

3>、function使用

Js代碼

<script type="text/javascript">
$(function () {
$.messager.alert("操作提示", "操作成功！", "info", function () {
var i = 1;
alert(i);
});
});
</script>

2、$.messager.confirm(title, msg, fn)
代碼：

Js代碼

<script type="text/javascript">
$(function () {
$.messager.confirm("操作提示", "您確定要執行操作嗎？", function (data) {
if (data) {
alert("確定");
}
else {
alert("取消");
}
});
});
</script>

效果圖：

3、$.messager.prompt(title, msg, fn)

代碼：

Js代碼

<script type="text/javascript">
$(function () {
$.messager.confirm("操作提示", "您確定要執行操作嗎？", function (data) {
if (data) {
alert("確定");
}
else {
alert("取消");
}
});
});
</script>

效果圖：

4、$.messager.show(options)
代碼：

Html代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>消息提示框</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.messager.show({
title: "操作提示",
msg: "請選擇您要刪除的記錄！",
showType: 'slide',
timeout: 5000
});
});
</script>
</head>
<body>
</body>
</html>

或

Js代碼

<script type="text/javascript">
$(function () {
var options = {
title: "操作提示",
msg: "請選擇您要刪除的記錄！",
showType: 'slide',
timeout: 5000
};
$.messager.show(options);
});
</script>

效果圖：

showType3種設置值:"show"、"slide"、"fade"

5、修改Button顯示文字

代碼：

Js代碼

<script type="text/javascript">
$(function () {
$.messager.defaults = { ok: "是", cancel: "否" };
$.messager.confirm("操作提示", "您確定要執行操作嗎？", function (data) {
if (data) {
alert("是");
}
else {
alert("否");
}
});
});
</script>

效果圖：

6、方法

方法名	參數	描述
$.messager.show	options	在屏幕的右下角顯示一個消息窗口。這些選項的參數可以是一下的一個配置對象： showType：定義如何將顯示消息窗口。可用的值是：null,slide,fade,show。默認值是slide。 showSpeed：定義消息窗口完成的時間（以毫秒為單位），默認值600。 width：定義消息窗口的寬度。默認值250。 height：定義消息窗口的高度。默認值100。 msg：定義顯示的消息文本。 title：定義顯示在標題面板顯示的標題文本。 timeout：如果定義為0，消息窗口將不會關閉，除非用戶關閉它。如果定義為非0值，當超時后消息窗口將自動關閉。
$.messager.alert	title, msg, icon, fn	顯示一個警告窗口。參數如下： title：顯示在標題面板的標題文本。 msg：提示框顯示的消息文本。 icon：提示框顯示的圖標。可用的值是：error,question,info,warning. fn：當窗口關閉時觸發的回調函數。
$.messager.confirm	title, msg, fn	顯示一個含有確定和取消按鈕的確認消息窗口。參數如下： title：顯示在標題面板的標題文本。 msg：確認消息窗口顯示的消息文本。 fn(b)：當用戶點擊按鈕后觸發的回調函數，如果點擊OK則給回調函數傳true,如果點擊cancel則傳false。
$.messager.prompt	title, msg, fn	顯示一個確定和取消按鈕的信息提示窗口，提示用戶輸入一些文本。參數如下： title：顯示在標題面板的標題文本。 msg：提示窗口顯示的消息文本。 fn(val)：用戶點擊按鈕后的回調函，參數是用戶輸入的內容。

7、擴展

可以通過$.messager.defaults方法自定義alert框的ok按鈕和cancel按鈕上顯示的文字。

名字	類型	描述	默認值
ok	字符串	Ok	按鈕上的文本	Ok
cancel	字符串	Cancel	按鈕上的文本	Cancel

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQueryEasyUI Messager基本彈窗的使用 jQueryEasyUI 在Asp.Net中使用JQueryEasyUI jQueryEasyUi驗證 $.messager.alert JqueryEasyUI之DataGrid擴展初試JqueryEasyUI（附Demo） JQueryEasyUI學習筆記（三） JQueryEasyUI學習筆記（一） JQueryEasyUI學習筆記（六）