jquery easyui messager plugin的使用

夏弘文
2023-12-01

messager提供了多风格的消息盒子,包括alert、confirm、prompt、progress等等。所有的messager都是异步的,用户可以使用回调函数来与messager进行交互。

messager依赖以下组件:window、linkbutton、progressbar。

messager使用案例

$.messager.alert('警告', '你在执行危险操作');

上述代码弹出一个警示框。

$.messager.confirm('确认','您确定要关闭此窗口吗?', function (r) if(r == true) {$(this).window('close');})

上述代码弹出一个确认框

messager的属性

名称 值类型 描述 默认值
ok string Ok按钮的文本 Ok
cancel string Cancel按钮的文本 Cancel

messager的方法

名称 参数 描述
$.messager.show options 在屏幕的右下角显示信息.。参数options是一个对象,用来配置显示样式:
showType: 定义这个信息窗体如何展示,可选的值如下:null、side、fade、show。默认值是side。
showSpeed: 定义窗口完成显示的时间,默认值是600毫秒。
width: 定义窗口的宽度,默认值是250。
height: 定义了窗口的高度,默认值是100。
title: 在panel顶部的标题。
msg: 需要显示的信息文本。
style: Defines the custom dpecification style for message window.
timeout: 如果定义为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 显示一个alert窗体。参数如下:
title: panel的标题。
msg: 需要显示的信息文本。
icon: 显示额图标,可选的值如下:error,question,info,warning.
fn: 当窗体关闭的回调函数。

案例代码:

$.messager.alert('My Title','Here is a info message!','info');
$.messager.confirm title, msg, fn 显示一个带有Ok按钮和Cancel按钮的确认框。参数如下:
title: 顶层panel的标题。
msg: 需要显示的信息文本。
fn(b): 回调函数,参数b回传的一个值,true表示点击了Ok按钮,false表示点击了Cancel按钮。

案例代码:

$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
	if (r){
		// exit action;
	}
});
$.messager.prompt title, msg, fn 显示一个带Ok按钮和Cancel按钮的输入框,提示用户进行输入,参数如下:
title: 顶层panel的标题。
msg: 需要显示的文本信息。
fn(val): 回调函数,val回传用户的输入。

案例代码:

$.messager.prompt('Prompt', 'Please enter your name:', function(r){
	if (r){
		alert('Your name is:' + r);
	}
});
$.messager.progress options or method 显示一个进度窗体
The options is defined as:
title: The title text to be showed on header panel, default ''. 
msg: The message box body text, default ''. 
text: The text to display in the progress bar, default undefined. 
interval: The length of time in milliseconds between each progress update, default 300. 

The method is defined as:
bar: Get the progressbar object. 
close: Close the progress window. 

Code example:

Show progress message window. 
$.messager.progress();
Now close the message window. 
$.messager.progress('close');

 类似资料: