v 1.1.3

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.

PropertyDescription

[position]

The position of the notification container, seen absolutely inside your app. Default: top-right.

Possible values are: top-right, top-left, bottom-right, bottom-left

[append]

Defines where the next notification should be placed in the stack. Default: after

Possible values are: before, after

[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: 5000

[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:

function (elm){
    elm.slideDown();
}

[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:

function (elm){
    elm.slideUp();
}

[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 {count: 1} becomes data-count="1" on the DOM element.

[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: null

[hideEffect]

The default hide effect for the element. See associated property description. Default: null

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.

comments powered by Disqus