ch.Tabs

Description

Tabs lets you create tabs for static and dynamic content.

How-to

// Create a new Tabs.
var tabs = new ch.Tabs(el);

Parameters

  • el - HTMLElement : A HTMLElement to create an instance of ch.Tabs.
  • options - Object : Options to customize an instance.

Extends

Properties

.Component#name String

The name of a component.

.container HTMLElement

The tabs container.

.panel HTMLElement

The container of tab panels.

.tabpanels Array

A collection of tab panel.

.Tabs#name String

The name of the component.

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

.triggers HTMLElement

The tabs triggers.

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








    
        




.disable(tab) → {tabs}




    
Disables an instance of Tabs or a specific tab panel.




    


    
	
        
  • 
            
            tab
             - 
            
                
Number
            
            : A given number of tab panel to disable.

            
        
    • 
	





    



// Disabling an instance of Tabs.
tabs.disable();








// Disabling the second tab panel.
tabs.disable(2);








    
        




.enable(tab) → {tabs}




    
Enables an instance of Tabs or a specific tab panel.




    


    
	
        
  • 
            
            tab
             - 
            
                
Number
            
            : A given number of tab panel to enable.

            
        
    • 
	





    



// Enabling an instance of Tabs.
tabs.enable();








// Enabling the second tab panel of a tabs.
tabs.enable(2);








    
        




.constructor()




    
Returns a reference to the constructor function.







    
        




.destroy()




    
Destroys a Tabs instance.






    



// Destroying an instance of Tabs.
tabs.destroy();








    
        




.getShown() → {Boolean}




    
Returns the number of the shown tab panel.






    



if (tabs.getShown() === 1) {
    fn();
}








    
        




.show(tab) → {tabs}




    
Shows a specific tab panel.




    


    
	
        
  • 
            
            tab
             - 
            
                
Number
            
            : A given number of tab panel.

            
        
    • 
	





    



// Shows the second tab panel.
tabs.show(2);








    






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








    
        




'hide'




    
Event emitted when a tab hide a tab panel container.






    



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








    
        




'hide'




    
Event emitted when a tab hide a tab panel container.






    



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








    
        




'ready'




    
Emits the event 'ready' when the component is ready to use.






    



// Subscribe to "ready" event.
tabs.on('ready',function () {
    this.show();
});








    
        




'show'




    
Event emitted when the tabs shows a tab panel container.






    



// Subscribe to "show" event.
tabs.on('show', function (shownTab) {
    // Some code here!
});