jGrowl 基于jQuery的消息弹出框插件

jGrowl 基于jQuery的消息弹出框插件

作者：lisanmiao   发布：2012-04-05 19:05   分类： JQuery   阅读： 8 浏览数   0 Comments  

// Sample 1：提示后自动消息
$.jGrowl("Hello world!");
// Sample 2：需要用户手动关闭
$.jGrowl("Stick this!", { sticky: true });
// Sample 3：增加标题
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4：指定在10秒后自动消失
$.jGrowl("A message that will live a little longer.", { life: 10000 });
// Sample 5：消失后有回调事件
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
beforeClose: function(e,m) {
alert('About to close this notification!');
},
animateOpen: {
height: 'show'
}
});

Option Name:	Default Value:	Explanation:
header	empty string	可选，设置消息框的标题内容。(Optional header to prefix the message, this is often helpful for associating messages to each other.)
sticky	false	可选，设置为ture时，由用户点击关闭才消息。(When set to true a message will stick to the screen until it is intentionally closed by the user.)
glue	after	Designates whether a jGrowl notification should be appended to the container after all notifications, or whether it should be prepended to the container before all notifications. Options are after or before.
position	top-right	消息框的位置，分top-left, top-right, bottom-left, bottom-right, center。(Designates a class which is applied to the jGrowl container and controls it’s position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called.)
theme	default	指定Css样式。(A CSS class designating custom styling for this particular message.)
corners	10px	圆角的曲率半径。(If the corners jQuery plugin is include this option specifies the curvature radius to be used for the notifications as they are created.)
check	1000	(The frequency that jGrowl should check for messages to be scrubbed from the screen.)
life	3000	消息框在多长时间后自动消失，默认为3秒。(The lifespan of a non-sticky message on the screen.)
speed	normal	打开或关闭时是否使用动画。(The animation speed used to open or close a notification.)
easing	swing	(The easing method to be used with the animation for opening and closing a notification.)
closer	true	是否出现关闭按钮。(Whether or not the close-all button should be used when more then one notification appears on the screen. Optionally this property can be set to a function which will be used as a callback when the close all button is clicked.)
closeTemplate	×	This content is used for the individual notification close links that are added to the corner of a notification.
closerTemplate	<div>[ close all ]</div>	This content is used for the close-all link that is added to the bottom of a jGrowl container when it contains more than one notification.
log	function(e,m,o) {}	Callback to be used before anything is done with the notification. This is intended to be used if the user would like to have some type of logging mechanism for all notifications passed to jGrowl. This callback receives the notification’s DOM context, the notifications message and it’s option object.
beforeOpen	function(e,m,o) {}	在打开消息框之前提示触发此事件。(Callback to be used before a new notification is opened. This callback receives the notification’s DOM context, the notifications message and it’s option object.)
open	function(e,m,o) {}	Callback to be used when a new notification is opened. This callback receives the notification’s DOM context, the notifications message and it’s option object.
beforeClose	function(e,m,o) {}	在消失之前触发此事件。(Callback to be used before a new notification is closed. This callback receives the notification’s DOM context, the notifications message and it’s option object.)
close	function(e,m,o) {}	Callback to be used when a new notification is closed. This callback receives the notification’s DOM context, the notifications message and it’s option object.
animateOpen	{ opacity: ’show’ }	The animation properties to use when opening a new notification (default to fadeOut).
animateClose	{ opacity: ‘hide’ }	The animation properties to use when closing a new notification (defaults to fadeIn).