當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI中Messager消息框的简单使用

發布時間：2025/3/19 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI中Messager消息框的简单使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

效果

屬性

名稱類型描述默認值

ok	string	確定按鈕的文本。	Ok
cancel	string	取消按鈕的文本。	Cancel

方法

名稱參數描述

$.messager.show	options	在屏幕的右下角顯示一個消息窗口，options 參數是一個配置對象： showType：定義消息窗口如何顯示。可用的值是：null、slide、fade、show。默認是 slide。 showSpeed：定義消息窗口完成顯示所需的以毫秒為單位的時間。默認是 600。 width：定義消息窗口的寬度。默認是 250。 height：定義消息窗口的高度。默認是 100。 title：頭部面板上顯示的標題文本。 msg：要顯示的消息文本。 style：定義消息窗口的自定義樣式。 timeout：如果定義為 0，除非用戶關閉，消息窗口將不會關閉。如果定義為非 0 值，消息窗口將在超時后自動關閉。默認是 4 秒。代碼實例： $.messager.show({ title:'My Title', msg:'Message will be closed after 5 seconds.', timeout:5000, showType:'slide' }); // show message window on top center $.messager.show({ title:'My Title', msg:'Message will be closed after 4 seconds.', showType:'show', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } });
$.messager.alert	title, msg, icon, fn	顯示一個警告提示窗口。參數： title：顯示在頭部面板上的標題文本。 msg：要顯示的消息文本。 icon：要顯示的圖標圖片。可用的值是：error、question、info、warning。 fn：當窗口關閉時觸發的回調函數。代碼實例： $.messager.alert('My Title','Here is a info message!','info');
$.messager.confirm	title, msg, fn	顯示一個帶"確定"和"取消"按鈕的確認消息窗口。參數： title：顯示在頭部面板上的標題文本。 msg：要顯示的消息文本。 fn(b)：回調函數，當用戶點擊確認按鈕時傳遞一個 true 參數給函數，否則給它傳遞一個 false 參數。代碼實例： $.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){ if (r){ // exit action; } });
$.messager.prompt	title, msg, fn	顯示一個帶"確定"和"取消"按鈕的消息窗口，提示用戶輸入一些文本。參數： title：顯示在頭部面板上的標題文本。 msg：要顯示的消息文本。 fn(val)：帶有用戶輸入的數值參數的回調函數。代碼實例： $.messager.prompt('Prompt', 'Please enter your name:', function(r){ if (r){ alert('Your name is:' + r); } });
$.messager.progress	options or method	顯示一個進度的消息窗口。 options 定義如下： title：顯示在頭部面板上的標題文本，默認值是 '' 。 msg：消息框的主體文本，默認值是 '' 。 text：顯示在進度條里的文本，默認值是 undefined 。 interval：每次進度更新之間以毫秒為單位的時間長度。默認值是 300。方法定義如下： bar：獲取進度條（progressbar）對象。 close：關閉進度窗口。代碼實例：顯示進度消息窗口。 $.messager.progress(); 現在關閉消息窗口。 $.messager.progress('close');

實現

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <a href="#" class="easyui-linkbutton" onclick="show()">show</a> <a href="#" class="easyui-linkbutton" onclick="slide()">slide</a> <a href="#" class="easyui-linkbutton" onclick="fade()">fade</a> <a href="#" class="easyui-linkbutton" onclick="progress()">progress</a> <script type="text/javascript">function show() {$.messager.show({title:"My Title",msg:'this is message',showType:'show'})}function slide() {$.messager.show({title:"My Title",msg:'this is message',showType:'slide',timeout:5000})}function fade() {$.messager.show({title:"My Title",msg:'this is message',showType:'fade',timeout:0})}function progress() {$.messager.progress({title:"My Title",msg:'loading.....',});setTimeout(function () {$.messager.progress("close")},3000)} </script> </body> </html>

總結

以上是生活随笔為你收集整理的EasyUI中Messager消息框的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EasyUI中Dialog对话框的简单使
下一篇： EasyUI中ToolTip提示框的简单