Messager

Override defaults with $.messager.defaults.

the messager provide different styles of message boxes, including alert, confirm, prompt, progress, etc. All the messager boxes are asynchronous. Users can use the callback function to do something after interacting with messager.

Dependencies

  • dialog
  • linkbutton
  • progressbar

Usage

Properties

The properties extend from dialog, below is the added properties for messager.

Name Type Description Default
ok string The Ok button text. Ok
cancel string The Cancel button text. Cancel
msg string The message to display on the dialog.
fn function The callback function when clicking on the OK or CANCEL buttons.

Methods

Name Parameters Description
$.messager.show options Show a message window on right bottom of screen. The options parameter is a configuration object:
showType: Defines how the message window to be showed. Available values are: null,slide,fade,show. Defaults to slide.
showSpeed: Defines the time in milliseconds message window finishs show. Defaults to 600.
width: Defines the width of message window. Defaults to 250.
height: Defines the height of message window. Defaults to 100.
title: The title text to be showed on header panel.
msg: The message text to be showed.
style: Defines the custom style for message window.
timeout: If defines to 0, the message window will not close unless user close it. Defines to unzero, the message window will be auto closed when timeout. Defaults to 4 seconds.

Code example:

$.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 Show an alert window. Parameters:
title: The title text to be showed on header panel.
msg: The message text to be showed.
icon: The icon image to be showed. Available value are: error,question,info,warning.
fn: The callback function triggered when clicking on the OK button.
The configuration object can be passed to the function argument.

Code example:

$.messager.alert('My Title','Here is a info message!','info');
$.messager.alert({
	title: 'My Title',
	msg: 'Here is a message!',
	fn: function(){
		//...
	}
});
$.messager.confirm title, msg, fn Show a confirmation message window with Ok and Cancel buttons. Parameters:
title: The title text to be showed on header panel.
msg: The message text to be showed.
fn(b): The callback function, when user click Ok button, pass a true value to function, otherwise pass a false to it.
The configuration object can be passed to the function argument.

Code example:

$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
	if (r){
		// exit action;
	}
});
$.messager.confirm({
	title: 'My Title',
	msg: 'Are you confirm this?',
	fn: function(r){
		if (r){
			alert('confirmed: '+r);
		}
	}
});
$.messager.prompt title, msg, fn Show a message window with Ok and Cancel buttons prompting user to enter some text. Parameters:
title: The title text to be showed on header panel.
msg: The message text to be showed.
fn(val): The callback function with a value parameter user entered.
The configuration object can be passed to the function argument.

Code example:

$.messager.prompt('Prompt', 'Please enter your name:', function(r){
	if (r){
		alert('Your name is:' + r);
	}
});
$.messager.prompt({
	title: 'Prompt',
	msg: 'Please enter your name:',
	fn: function(r){
		if (r){
			alert('Your name is:' + r);
		}
	}
});
$.messager.progress options or method Show a progress message window.
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');