modo.NotificationContainer
The modo.Notification element provides a better alternative to alert() messages to notify your user about something. They are placed in front of everything and will stack up from one corner of your application into a specific direction, just like GROWL messages.
The modo.NotificationContainer is used to collect groups of notification elements. The container places itself on top of everything and gives the order of notifications a direction.
Heads up! This element attaches itself automatically to the application root container upon creation. It does NOT need to be attached to a container manually.
Constructor
modo.NotificationContainer(params)modo.NotificationContainer
The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.
| Property | Description |
|---|---|
[position] | The position of the notification container, seen absolutely inside your app. Default: Possible values are:
|
[append] | Defines where the next notification should be placed in the stack. Default: Possible values are:
|
[showLimit] | Defines the maximum number of notifications to be displayed in the box. All notification that are added above this limit are kept invisible until space gets free. Default: infinite |
[displayTime] | Defines the default display time in milliseconds of a notification after that its being removed from the container. Default: |
[showEffect] | A function that is called upon each notification to be displayed on screen. The DOM element of the notification object is passed into the function. Default: |
[hideEffect] | A function that is called upon each notification to be hidden from screen. The DOM element of the notifications object is passed into the function, as well as a callback function to be called after the animation is complete. Default: |
[className] | A string with custom CSS classes to apply to the generated DOM element |
[dataAttributes] | A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example |
[el] | The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter. |
[showEffect] | The default show effect for the element. See associated property description. Default: |
[hideEffect] | The default hide effect for the element. See associated property description. Default: |
Properties
Inherited Properties from modo.Element
elObject
Contains the jQuery enhanced DOM Node of this modoJS element.
modoIdNumber
Contains a internally given, numeric ID for this element.
visibleBool
Will be set by .show() and .hide(). Access this property to check the current visibility of the element.
showEffectobject
Set a default show effect (like the options you can pass to the show() / hide() methods.
Example:
element.showEffect = {
effect: 'slideDown',
effectArgs: ['fast']
};
hideEffectobject
Define a default hide effect instead of a simple, instant hide.
Methods
add(modo.Notification)this
Adds a new notification element to the container.
createNotification(params)modo.Notification
This is a shortcut method to create a new modo.Notification object and directly add it to the container. The object is then returned from the method so you can keep a reference somewhere.
Events
add
Triggered, whenever a new notification has been added through add() or createNotification().
remove
Triggered, whenever a notification has been removed from the Notification Container. This happens when they either have expired, or defined to be invisible.
queueEmpty
Triggered, when all notifications have been removed from the container.
Inherited Events from modo.Element
show
Triggered, when the object has been displayed through show()
hide
Triggered, when the object has been hidden through hide()
CSS Classes
mdo-notificationcontainer
Applied on element.
mdo-pos-[top-left, top-right, bottom-left, bottom-right]
Applied dependend on the given position parameter in the constructor.
mdo-append-[before, after]
Applied dependent on the given append parameter in the constructor.
Inherited CSS Classes from modo.Element
mdo-element
Basic class that will be applied to every element that extends modo.Element.
mdo-flexible
Will be applied to every modo element where setFlexible(true) has been called upon.