jQueryEasyUI Messager基本使用

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、jQueryEasyUI

http://www.jeasyui.com/

二、jQueryEasyUI Messager基本使用

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

代碼：

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

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

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

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

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

3>、function使用

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

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

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

：

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

代碼：

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

：

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

<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>

或

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

：

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

5、修改Button顯示文字

代碼：

<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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQueryEasyUI Messager基本使用

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support