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 custom options.
var expandable = new ch.Expandable({
'container': document.querySelector('.my-container'),
'toggle': false,
'fx': 'slideDown',
'content': 'http://ui.ml.com:3040/ajax'
});
// Create a new Expandable using the shorthand way (content as parameter).
var expandable = new ch.Expandable('http://ui.ml.com:3040/ajax');
Parameters
-
el
- HTMLElement : A HTMLElement 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
- HTMLElement : The container where the expanbdale puts its content. Default: the next sibling of el parameter. -
content
- String | HTMLElement : The content to be shown into the expandable container.
-
Extends
Mixes In
Properties
.Component#name
String
The name of a component.
.container
HTMLElement
The expandable container.
// Gets the expandable container.
expandable.container;
.Expandable#name
String
The name of the component.
.trigger
HTMLElement
The expandable trigger.
// Gets the expandable trigger.
expandable.trigger;
.uid
Number
A unique id to identify the instance of a component.
Methods
-
content
- String | HTMLElement : 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. Default: "GET". -
params
- String : Params like query string to be sent to the server. -
cache
- Boolean : Force to cache the request by the browser. Default: true. -
async
- Boolean : Force to sent request asynchronously. Default: true. -
waiting
- String | HTMLElement : Temporary content to use while the ajax request is loading.
-
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys an instance of Component and remove its data from asociated element.
// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;
.disable() → {component}
Disables an instance of Component.
// Disabling an instance of Component.
component.disable();
.enable() → {component}
Enables an instance of Component.
// Enabling an instance of Component.
component.enable();
.require() → {component}
Adds functionality or abilities from other classes.
// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys an Expandable instance.
// Destroy an expandable
expandable.destroy();
// Empty the expandable reference
expandable = undefined;
.hide() → {expandable}
Hides component's container.
// Close an expandable.
expandable.hide();
.isShown() → {Boolean}
Returns a Boolean specifying if the component's core behavior is shown. That means it will return 'true' if the component is on, and it will return false otherwise.
// Execute a function if the component is shown.
if (expandable.isShown()) {
fn();
}
.show(content, options) → {expandable}
Shows expandable's content.
// Shows a basic expandable.
component.show();
// Shows an expandable with new content.
component.show('Some new content here!');
// Shows an expandable with a new content that will be loaded by ajax and some custom options.
component.show('http://chico-ui.com.ar/ajax', {
'cache': false,
'params': 'x-request=true'
});
Events
'destroy'
Emits when a component is destroyed.
// Subscribe to "destroy" event.
component.on('destroy', function () {
// Some code here!
});
'disable'
Emits when a component is disable.
// Subscribe to "disable" event.
component.on('disable', function () {
// Some code here!
});
'enable'
Emits when a component is enabled.
// Subscribe to "enable" event.
component.on('enable', function () {
// Some code here!
});
'ready'
Event emitted when the component is ready to use.
// Subscribe to "ready" event.
expandable.on('ready', function () {
// Some code here!
});