ch.Floats (Class)

Documentation updated on Fri Jul 06 2012, generated by JsDoc Toolkit.

Overview

ch.Floats extends ch.Uiobject. Floats brings the functionality of all Floats elements.

View source on GitHub

Requires

Returns

itself

Returns

Properties

element

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.

HTMLElement

type

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'.

string

uid

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.

number

Methods

content(content)

Sets and gets component content. To get the defined content just use the method without arguments, like 'widget.content()'. To define a new content pass an argument to it, like 'widget.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.

It method borrows ch.Uiobject#content.

Parameters

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

Examples

Get the defined content

widget.content();

Set static content

widget.content("Some static content");

Set DOM content

widget.content("#hiddenContent");

Set AJAX content

widget.content("http://chico.com/some/content.html");
height()

Sets or gets the height of the Float element.

Returns

  • itself

See also:

ch.Floats#size

Examples

to set the height

widget.height(300);

to get the height

widget.height // 300
hide()

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

Returns

  • itself
isActive()

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
off(event, handler)

Removes a callback function from specific event.

It method borrows ch.Object#off.

Parameters

  • event Since version 0.7.1: string Event nawidget.
  • handler Since version 0.7.1: function Handler function.

Returns

  • itself

Examples

Will remove event handler to the "ready" event

var startDoingStuff = function () {
    // Some code here!
};

widget.off("ready", startDoingStuff);
on(event, handler)

Add a callback function from specific event.

It method borrows ch.Object#on.

Parameters

  • event Since version 0.7.1: string Event nawidget.
  • handler Since version 0.7.1: function Handler function.

Returns

  • itself

Examples

Will add a event handler to the "ready" event

widget.on("ready", startDoingStuff);
once(event, handler)

Add a callback function from specific event that it will execute once.

It method borrows ch.Object#once.

Parameters

  • event Since version 0.8.0: string Event nawidget.
  • handler Since version 0.8.0: function Handler function.

Returns

  • itself

Examples

Will add a event handler to the "contentLoad" event once

widget.once("contentLoad", startDoingStuff);
position()

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

See also:

ch.Floats#position

Examples

Change component's position.

widget.position({ 
	  offset: "0 10",
	  points: "lt lb"
});

Refresh position.

widget.position("refresh");
show()

Triggers the innerShow method, returns the public scope to keep method chaining and sets new content if receive a parameter.

Returns

  • itself

See also:

ch.Floats#content

width(width)

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'.

Parameters

  • width: Number|String, Optional.

Returns

  • itself

See also:

ch.Zarasa#size , ch.Floats#size

Examples

to set the width

widget.width(700);

to get the width

widget.width() // 700

Events

hide
Triggers when component is not longer visible.

Examples

When the component hides show other component.

widget.on("hide",function () {
	otherComponent.show();
});
ready
Triggers when the component is ready to use.

Examples

Following the first example, using widget as modal's instance controller:

widget.on("ready",function () {
	this.show();
});
show
Triggers when component is visible.

Examples

It change the content when the component was shown.

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

See