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

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




    


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

            
        
      • 
	

    
            
        
    • 
	





    



// 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!
});