碼上快樂

相關內容    簡體    繁體

jQueryEasyUI Messager基本彈窗的使用

本文轉載自   查看原文   2017-12-13 09:11   2271    jQueryEasyUI基本彈窗

一、jQueryEasyUI下載地址

http://www.jeasyui.com/

二、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
<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"
效果：

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
<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>
復制代碼

或

復制代碼
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

在屏幕的右下角顯示一個消息窗口。這些選項的參數可以是一下的一個配置對象：
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

 

參考自：http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html


免責聲明！

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



猜您在找 jQueryEasyUI Messager基本使用 jQueryEasyUI 在Asp.Net中使用JQueryEasyUI easyui 中iframe嵌套頁面，提示彈窗遮罩的解決方法，parent.$.messager.alert和parent.$.messager.confirm jQueryEasyUi驗證 $.messager.alert element MessageBox彈窗的使用 Messenger 彈窗的使用 sweetalert彈窗的使用 layui 彈窗使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM