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).
|
