jGrowl 基于jQuery的消息弹出框插件
// 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).
|