v 1.1.3

modo.PopUpBubble

A PopUp Bubble behaves a bit like a tooltip. It looks like a balloon, or a speech bubble and can be attached to Modo elements or fixed positions on the screen.

When opened, the PopUp Bubble will appear and can close itself when the user clicks somewhere on the screen.

The most useful feature of the PopUp Bubble is its capability to attach itself relatively to another Modo element.

The PopUpBubble is an extension of modo.PopUp.

Constructor

modo.PopUpBubble(params)modo.PopUpBubble

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

PropertyDescription

[autohide]

Enable or disable the element to be automatically hidden when the user clicks somewhere in the application. Default: true

[animate]

If set to true, the PopUp will use jQuerys fadeIn() and fadeOut() methods for showing and hiding the PopUp

[keyboard]

When set to true, a hit on the keyboards ESC key will close the window. Default: true

[showEffect]

Function to be called when the element should be shown. Called when animate = true. The function gets a reference to the DOM element passed as first parameter.

[hideEffect]

Function to be called when the element should be hidden. Called when animate = true. The function gets a reference to the DOM element passed as first parameter.

[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.PopUp

Methods

attach(targetElement, position)this

Attaches the PopUp Bubble to a interface element. Call open() afterwards to display the PopUp Bubble.

targetElement can be any Modo Element and any DOM element.

position can be one of the following string values:

ValueDescription

tl

Attach on top, direction left

tc

Attach on top, align centered

tr

Attach on top, direction right

lt

Attach to the left, direction up

lc

Attach to the left, align centered

lb

Attach to the left, direction down

rt

Attach to the right, direction up

rc

Attach to the right, align centered

rb

Attach to the right, align down

bl

Attach on bottom, direction left

bc

Attach on bottom, align centered

br

Attach on bottom, direction right

Inherited Methods from modo.PopUp

open()this

Will display the PopUp on screen. This triggers the Backbone Event "open".

close()this

Will hide the PopUp from screen. This triggers the Backbone Event "close".

move(x, [y])this

Sets the window to a specific position on screen. Either pass x and y value separately, or a JavaScript Object with x and y attributes. Triggers the Backbone Event "move".

This will be assigned to CSS properties, so all valid CSS position values will work.

isOpen()bool

Returns either true or false when the window is currently open or closed.

Events

change

Triggered when the elements value has been changed through set().

click

Triggered, when the button is enabled and a user has clicked on it.

Event parameterDescription

event

The click event object

enabled

Triggered, when the button has been enabled through enable().

disabled

Triggered, when the button has been disabled through disable().

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

Applied on the element. Also applied to a span tag inside the element to act as a checker when the custom property has been set to true.

mdo-checkbox-label

Applied to a span tag to act as a label.

mdo-checked

Applied to the element when the elements value is set to true.

mdo-disabled

Applied when the element has been disabled through disable(). Will be removed after a call to enable().

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