modo.FormSlot

The FormSlot element can be used to group child elements besides a label. While you can use this element everywhere as a container, it gets more useful inside a modo.FormContainer, since it will propagate the keys of the added children to the formcontainer as if they have been added directly to it.

The FormContainer Demo is used here again, since it also demonstrates the use of FormSlots.

Constructor

modo.FormSlot(params)modo.FormSlot

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

Property	Description
[label]	A labeling text to place next to the children of this container
[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

Inherited Properties from modo.Container

Methods

set()this

Setter for the elements label text.

get()this

Getter for the elements label text.

add(...)this

Use this function to add one or more modo / jQuery / DOM elements to the container. Will trigger the Backbone Event "add". Either pass:

• Modo elements directly
• DOM/jQuery elements directly
• Modo elements encapsulated in a object to add them with keys. Example: {mykey: someModoElement}

remove(elm)this

Either pass the key of a keyed element here, or directly a unkeyed element.

Inherited Methods from modo.Container

add(element, ..., [options])this

Use this function to add one or more modo / jQuery / DOM elements to the container. Will trigger the Backbone Event "add", unless {silent: true} is passed as option object.

remove(element, ..., [options])this

This will remove one or more elements from the container. Either pass a modo element here, to get it removed from the container, or pass a jQuery selector to remove a DOM element.

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

Will be triggered, when the elements label text is changed through set().

Inherited Events from modo.Container

add

Triggered, when a child has been added through add()

Event Parameter	Description
childElement	Can be either a modo element, a jQuery enhanced DOM object, or a DOM object

remove

Triggered, when a child has been removed through remove()

CSS Classes

mdo-formslot

Added to the formslot element.

mdo-formslot-label

Added to the label inside the formslot element.

mdo-formslot-container

Added to the container that holds the formslot elements children.

Inherited CSS Classes from modo.Container

mdo-container

Applied to the modo element.

mdo-container-layout-normal

Applied when horizontal container layout is configured.

mdo-container-layout-inline

Applied when vertical container layout is configured.

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.