一、jQueryEasyUI下載地址
二、jQueryEasyUI Messager基本使用
1、$.messager.alert(title, msg, icon, fn)
1>、基本用法
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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"
效果：
|
1
2
3
4
5
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.alert(
"操作提示"
,
"操作成功！"
,
"info"
);
????
});
</script>
|
|
1
2
3
4
5
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.alert(
"操作提示"
,
"操作失敗！"
,
"error"
);
????
});
</script>
|
|
1
2
3
4
5
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.alert(
"操作提示"
,
"您確定要執行操作嗎！"
,
"question"
);
????
});
</script>
|
|
1
2
3
4
5
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.alert(
"操作提示"
,
"您確定要執行操作嗎！"
,
"warning"
);
????
});
</script>
|
3>、function使用
|
1
2
3
4
5
6
7
8
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.alert(
"操作提示"
,
"操作成功！"
,
"info"
,
function
() {
????????????
var
i = 1;
????????????
alert(i);
????????
});
????
});
</script>
|
2、$.messager.confirm(title, msg, fn)
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.confirm(
"操作提示"
,
"您確定要執行操作嗎？"
,
function
(data) {
????????????
if
(data) {
????????????????
alert(
"確定"
);
????????????
}
????????????
else
{
????????????????
alert(
"取消"
);
????????????
}
????????
});
????
});
</script>
|
效果圖：
3、$.messager.prompt(title, msg, fn)
代碼：
|
1
2
3
4
5
6
7
8
9
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.prompt(
"操作提示"
,
"您確定要執行操作嗎？"
,
function
(data) {
????????????
if
(data) {
????????????????
alert(data);
????????????
}
????????
});
????
});
</script>
|
效果圖：
4、$.messager.show(options)
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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>
|
或
|
1
2
3
4
5
6
7
8
9
10
11
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
var
options = {
????????????
title:
"操作提示"
,
????????????
msg:
"請選擇您要刪除的記錄！"
,
????????????
showType:
'slide'
,
????????????
timeout: 5000
????????
};
????????
$.messager.show(options);
????
});
</script>
|
效果圖：
showType3種設置值:"show"、"slide"、"fade"
5、修改Button顯示文字
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script type=
"text/javascript"
>
????
$(
function
() {
????????
$.messager.defaults = { ok:
"是"
, cancel:
"否"
};
?
?
????????
$.messager.confirm(
"操作提示"
,
"您確定要執行操作嗎？"
,
function
(data) {
????????????
if
(data) {
????????????????
alert(
"是"
);
????????????
}
????????????
else
{
????????????????
alert(
"否"
);
????????????
}
????????
});
????
});
</script>
|
效果圖：
6、方法
|
方法名 |
參數 |
描述 |
|
$.messager.show |
options |
在屏幕的右下角顯示一個消息窗口。這些選項的參數可以是一下的一個配置對象：
|
|
$.messager.alert |
title, msg, icon, fn |
顯示一個警告窗口。參數如下：
|
|
$.messager.confirm |
title, msg, fn |
顯示一個含有確定和取消按鈕的確認消息窗口。參數如下：
|
|
$.messager.prompt |
title, msg, fn |
顯示一個確定和取消按鈕的信息提示窗口，提示用戶輸入一些文本。參數如下：
|
7、擴展
可以通過$.messager.defaults方法自定義alert框的ok按鈕和cancel按鈕上顯示的文字。
|
名字 |
類型 |
描述 |
默認值 |
? |
|
ok |
字符串 |
Ok |
按鈕上的文本 |
Ok |
|
cancel |
字符串 |
Cancel |
按鈕上的文本 |
Cancel |
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
