ch.Expandable

Description

Expandable lets you show or hide content. Expandable needs a pair: a title and a container related to title.

How-to

// Create a new Expandable.
var expandable = new ch.Expandable($el, [options]);

// Create a new Expandable with jQuery or Zepto.
var expandable = $(selector).expandable([options]);

// Create a new Expandable with custom options.
var expandable = $(selector).expandable({
    'container': $(selector),
    'toggle': false,
    'fx': 'slideDown',
    'content': 'http://ui.ml.com:3040/ajax'
});

// Create a new Expandable using the shorthand way (content as parameter).
var expandable = $(selector).expandable('http://ui.ml.com:3040/ajax');

Parameters

• $el - jQuerySelector | ZeptoSelector : A jQuery or Zepto Selector to create an instance of ch.Expandable.
• options - Object : Options to customize an instance.
  • fx - String : Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "none".
  • toggle - Boolean : Customize toggle behavior. Default: true.
  • container - jQuerySelector | ZeptoSelector : The container where the expanbdale puts its content. Default: the next sibling of $el.
  • content - jQuerySelector | ZeptoSelector | String : The content to be shown into the expandable container.

Extends

• ch.Widget

Mixes In

• ch.Collapsible
• ch.Content

Properties

.$container jQuerySelector | ZeptoSelector

The expandable container.

// Gets the expandable container.
expandable.$container;

.$trigger jQuerySelector | ZeptoSelector

The expandable trigger.

// Gets the expandable trigger.
expandable.$trigger;

.uid Number

A unique id to identify the instance of a widget.

.Widget#name String

The name of a widget.

// You can reach the instance associated.
var widget = $(selector).data(name);

Methods

.emit(event, var_args)

Execute each item in the listener collection in order with the specified data.

• event - String : The name of the event you want to emit.
• var_args - Object : Data to pass to the listeners.

// Will emit the 'ready' event with 'param1' and 'param2' as arguments.
widget.emit('ready', 'param1', 'param2');

.getListeners(event) → {Array}

Returns all listeners from the collection for a specified event.

• event - String : The event name.

// Returns listeners from 'ready' event.
widget.getListeners('ready');

.off(event, listener) → {Object}

Removes a listener from the collection for a specified event.

• event - String : Event name.
• listener - Function : Listener function.

// Will remove event listener to 'ready' event.
widget.off('ready', listener);

.on(event, listener, once)

Adds a listener to the collection for a specified event.

• event - String : The event name to subscribe.
• listener - Function : Listener function.
• once - Boolean : Indicate if a listener function will be called only one time.

// Will add an event listener to 'ready' event.
widget.on('ready', listener);

.once(event, listener) → {Object}

Adds a listener to the collection for a specified event to will execute only once.

• event - String : Event name.
• listener - Function : Listener function.

// Will add an event handler to 'contentLoad' event once.
widget.once('contentLoad', listener);

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys an Expandable instance.

// Destroying an instance of Expandable.
expandable.destroy();

.hide() → {expandable}

Hides widget's container.

// Close an expandable.
expandable.hide();

.isShown() → {Boolean}

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

// Execute a function if the widget is shown.
if (expandable.isShown()) {
    fn();
}

.show(content, options) → {expandable}

Shows expandable's content.

• content - String | jQuerySelector | ZeptoSelector : The content that will be used by expandable.
• options - Object : A custom options to be used with content loaded by ajax.
  • method - String : The type of request ("POST" or "GET") to load content by ajax. By default is "GET".
  • params - String : Params like query string to be sent to the server.
  • cache - Boolean : Force to cache the request by the browser. By default is true.
  • async - Boolean : Force to sent request asynchronously. By default is true.
  • waiting - String | jQuerySelector | ZeptoSelector : Temporary content to use while the ajax request is loading.

// Shows a basic expandable.
widget.show();

// Shows an expandable with new content.
widget.show('Some new content here!');

// Shows an expandable with a new content that will be loaded by ajax and some custom options.
widget.show('http://chico-ui.com.ar/ajax', {
    'cache': false,
    'params': 'x-request=true'
});

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys an instance of Widget and remove its data from asociated element.

// Destroying an instance of Widget.
widget.destroy();

.disable() → {instance}

Disables an instance of Widget.

// Disabling an instance of Widget.
widget.disable();

.enable() → {instance}

Enables an instance of Widget.

// Enabling an instance of Widget.
widget.enable();

.require() → {instance}

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your widget.
// For example you should require the collpasible abitliy.
var widget = new Widget(element, options);
widget.require('Collapsible');

Events

'destroy'

Emits when a widget is destroyed.

// Subscribe to "destroy" event.
widget.on('destroy', function () {
 // Some code here!
});

'disable'

Emits when a widget is disable.

// Subscribe to "disable" event.
widget.on('disable', function () {
 // Some code here!
});

'enable'

Emits when a widget is enable.

// Subscribe to "enable" event.
widget.on('enable', function () {
 // Some code here!
});

'ready'

Event emitted when the widget is ready to use.

// Subscribe to "ready" event.
expandable.on('ready', function () {
    // Some code here!
});