ch.Modal (Class)

Documentation updated on Fri May 18 2012 12:47:10 GMT-0300 (GMT-03:00), generated by JsDoc Toolkit 2.4.0

Overview

Is a centered floated window with a dark gray dimmer background.

• Constructor name: ch.Modal(conf)
• ch.Modal extends ch.Floats.
• View source on GitHub.

Summary

Classdetail

Parameters

• conf: Object, Optional. Object with configuration properties.
• conf.content: String, Optional. Sets content by: static content, DOM selector or URL. By default, the content is the href attribute value or form's action attribute.
• conf.width: Number || String, Optional. Sets width property of the component's layout. By default, the width is "500px".
• conf.height: Number || String, Optional. Sets height property of the component's layout. By default, the height is elastic.
• conf.fx: Boolean, Optional. Enable or disable UI effects. By default, the effects are enable.
• conf.cache: Boolean, Optional. Enable or disable the content cache. By default, the cache is enable.
• conf.closable: String, Optional. Sets the way (true, "button" or false) the Modal close. By default, the modal close true.

Returns

• itself

See

• ch.Tooltip
• ch.Layer
• ch.Zoom

// Create a new modal window with configuration.
var me = $("a.example").modal({
    "content": "Some content here!",
    "width": "500px",
    "height": 350,
    "cache": false,
    "fx": false
});

// Create a new modal window triggered by an anchor with a class name 'example'.
var me = $("a.example").modal();

// Now 'me' is a reference to the modal instance controller.
// You can set a new content by using 'me' like this:
me.content("http://content.com/new/content");

Properties detail

$dimmer (private, jQuery)

Reference to the dimmer object, the gray background element.

dimmer (private, object)

Reference to dimmer control, turn on/off the dimmer object.

element (public, HTMLElement)

Reference to a DOM Element. This binding between the component and the HTMLElement, defines context where the component will be executed. Also is usual that this element triggers the component default behavior.

that (private, object)

Reference to a internal component instance, saves all the information and configuration properties.

type (public, string)

This public property defines the component type. All instances are saved into a 'map', grouped by its type. You can reach for any or all of the components from a specific type with 'ch.instances'.

uid (public, number)

The 'uid' is the Chico's unique instance identifier. Every instance has a different 'uid' property. You can see its value by reading the 'uid' property on any public instance.

Methods detail

closable (protected)

Returns any if the component closes automatic.

Returns

• boolean

content (public)

Sets and gets component content. To get the defined content just use the method without arguments, like 'me.content()'. To define a new content pass an argument to it, like 'me.content("new content")'. Use a valid URL to get content using AJAX. Use a CSS selector to get content from a DOM Element. Or just use a String with HTML code.

// Get the defined content
me.content();

// Set static content
me.content("Some static content");

// Set DOM content
me.content("#hiddenContent");

// Set AJAX content
me.content("http://chico.com/some/content.html");

Parameters

• content: string. Static content, DOM selector or URL. If argument is empty then will return the content.

See

• ch.Object#content

height (public)

Sets or gets the height property of the component's layout. Use it without arguments to get the value. To set a new value pass an argument, could be a Number or CSS value like '100' or '100px'.

// to set the heigth
me.height(300);

// to get the heigth
me.height // 300

Returns

• itself

See

• ch.Floats#size

hide (public)

Triggers the innerHide method and returns the public scope to keep method chaining.

// Following the first example, using 'me' as modal's instance controller:
me.hide();

Returns

• itself

See

• ch.Floats#hide

innerHide (protected)

Inner hide method. Hides the component's layout and detach it from DOM tree.

Returns

• itself

innerShow (protected)

Inner show method. Attach the component's layout to the DOM tree and load defined content.

Returns

• itself

isActive (public)

Returns a Boolean if the component's core behavior is active. That means it will return 'true' if the component is on and it will return false otherwise.

Returns

• boolean

position (public)

Sets or gets positioning configuration. Use it without arguments to get actual configuration. Pass an argument to define a new positioning configuration.

// Change component's position.
me.position({
	offset: "0 10",
	points: "lt lb"
});

See

• ch.Object#position

show (public)

Triggers the innerShow method and returns the public scope to keep method chaining.

// Following the first example, using 'me' as modal's instance controller:
me.show();

Returns

• itself

See

• ch.Floats#show

width (public)

Sets or gets the width property of the component's layout. Use it without arguments to get the value. To set a new value pass an argument, could be a Number or CSS value like '300' or '300px'.

// to set the width
me.width(700);

// to get the width
me.width // 700

Returns

• itself

See

• ch.Floats#size

Events detail

hide (public)

Triggers when component is not longer visible.

me.on("hide",function () {
	otherComponent.show();
});

See

• ch.Floats#event:hide

ready (public)

Triggers when the component is ready to use.

// Following the first example, using 'me' as modal's instance controller:
me.on("ready",function () {
	this.show();
});

show (public)

Triggers when component is visible.

me.on("show",function () {
	this.content("Some new content");
});

See

• ch.Floats#event:show