v 1.1.3

modo.Viewstack

The view stack is a container type that only shows one child at a time and automatically hides all other children.

Tip: Connect the ViewStack with a ToggleGroup to create tabbed content areas!

Constructor

modo.Viewstack(params)modo.Viewstack

The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.

PropertyDescription

switchMethod

A function that should handle the switching between the element children. By default, the element uses show() and hide() for switching items. Default: undefined.

Example for fading between elements:

 var vst_myStack = new modo.ViewStack({
    switchMethod: function(hideElm, showElm){
        hideElm.el.fadeOut('fast', function(){
            showElm.el.fadeIn('fast');
        });
    }
 });

[layout]

Define here, if contained elements should be layed out in Block (modo.Container.NORMAL) or Inline-Block (modo.Container.INLINE) mode, by default. Default: modo.Container.NORMAL

[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

switchMethodFunction

See object constructor. Optional function, being called for switching between elements.

countNumber

Number of elements inside the viewstack.

displayingNumber

Index of the currently visible element.

Inherited Properties from modo.Container

Methods

add(object, options)this

The behaviour of this add() function is different to the behaviour of the Container's add() function. You have to add a key/value object here, where the value is a modo element.

Example:

{
   'test': new modo.Container()
}

So you can show this element by calling display('test');
Notice: You can add multiple elements at once. Just give every element its own object key.

This method triggers the add event. Pass {silent: true} as options object to avoid the event.

remove(key, options)this

Will remove the element with the given key from the container.

A error will be thrown if the element is not part of the container.

This method triggers the remove event. Pass {silent: true} as options object to avoid the event.

getElements()object

Returns the internal object with references to all contained elements.

getElementByKey(key)object

Returns a reference to the object with the given key. Will throw an error if the element doesn't exist.

set(key)this

Switches the displayed child to the one with the given key. Will throw an error if no element with this key exists.

Triggers a display event.

Tip: Define a switchMethod to create custom show/hide effects.

get()boolean

Returns the key of the currently visible child.

Inherited Methods from modo.Element

setFlexible([value])this

Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.

show(options)this

Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.

Example:

element.show({
    effect: 'slideDown',
    effectArgs: ['fast']
});

hide()this

Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.


Note: All modoJS Objects are extended with all methods of the Backbone.Events class.


Events

change(key)

Triggered, when the visible child of the container has been changed. Gets the key of the now visible child passed.

add(object)

Triggered, when a new element has been added to the container. Gets a reference to the object passed.

remove(object)

Triggered, when a element has been removed from the container. Gets a reference to the object passed.

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-viewstack

Applied on the element.

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