ch.Layer (Class)

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

Overview

Is a contextual floated UI-Object.

• Constructor name: ch.Layer(conf)
• ch.Layer 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 empty.
• 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.event: String, Optional. Sets the event ("click" or "hover") that trigger show method. By default, the event is "hover".
• conf.points: String, Optional. Sets the points where component will be positioned, specified by configuration or centered by default: "cm cm".
• conf.offset: String, Optional. Sets the offset in pixels that component will be displaced from original position determined by points. It's specified by configuration or zero by default: "0 0".
• 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 Layer close when conf.event is set as "click". By default, the layer close true.

Returns

• itself

See

• ch.Tooltip
• ch.Modal
• ch.Zoom

// Create a new contextual layer with configuration.
var me = $(".some-element").layer({
    "content": "Some content here!",
    "width": "200px",
    "height": 50,
    "event": "click",
      "closable": "button",
    "offset": "10 -10",
    "cache": false,
    "points": "lt rt"
});

// Create a simple contextual layer
var me = $(".some-element").layer("Some content.");

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

Properties detail

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.

hideTime (private, number)

Delay time to hide component's contents.

ht (private, timer)

Hide timer instance.

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

clearTimers (private)

Clear all timers.

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 height
me.height(300);

// to get the height
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

hideTimer (private)

Starts hide timer.

innerHide (protected)

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

Returns

• itself

innerShow (protected)

Inner show method. Attach the component layout to the DOM tree.

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 (Since 0.8.0).

// Following the first example, using 'me' as layer'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