jQueryEasyUI Messager基本使用

時間 2019-11-07

標籤 jqueryeasyui messager 基本使用欄目 JQuery 简体版

原文原文鏈接

1、jQueryEasyUI下載地址javascript

http://www.jeasyui.com/css

2、jQueryEasyUI Messager基本使用html

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

代碼：jquery

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

效果圖：ide

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使用ui

<script type= "text/javascript" >

$( function () {

$.messager.alert( "操做提示" , "操做成功！" , "info" , function () {

var i = 1;

alert(i);

});

</script>

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

<script type= "text/javascript" >

$( function () {

$.messager.confirm( "操做提示" , "您肯定要執行操做嗎？" , function (data) {

if (data) {

alert( "肯定" );

}

else {

alert( "取消" );

}

});

</script>

效果圖：code

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

代碼：

<script type= "text/javascript" >

$( function () {

$.messager.prompt( "操做提示" , "您肯定要執行操做嗎？" , function (data) {

if (data) {

alert(data);

}

});

</script>

效果圖：

四、$.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>

或

$(function () {

var options = {

title: "操做提示",

msg: "請選擇您要刪除的記錄！",

showType: 'slide',

timeout: 5000

};

$.messager.show(options);

});

</script>

效果圖：

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

五、修改Button顯示文字

代碼：

<script type= "text/javascript" >

$( function () {

$.messager.defaults = { ok: "是" , cancel: "否" };

$.messager.confirm( "操做提示" , "您肯定要執行操做嗎？" , function (data) {

if (data) {

alert( "是" );

}

else {

alert( "否" );

}

});

</script>

效果圖：

六、方法

方法名	參數	描述
$.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)：用戶點擊按鈕後的回調函，參數是用戶輸入的內容。