Usage

👽 app-tab-bar usage/documentation

• Quick Usage
• Documentation

app-tab-bar defines a global variable called AppTabBar. All of the contents of the app-tab-bar-system is located within the AppTabBar object.

⚡️Quick Usage

Reference the files.

Reference tabbar.js (or tabbar.min.js) and tabbar.css in your document.

Create a node/HTML-DOM-element in your document.

<div id="tab_bar"></div>

Create a Tabbar-instance.

var tabbar = new Tabbar('tab_bar');

In your document-ready, setup tabbar.

👆🏽In this step, it is normal to add event listeners, this is specified in the options-parameter when adding a new tab.

//Initialize the tabbar
tabbar.init(); 

//Add tabs (with options)
var tab_home = tabbar.addTab('Home', 'fa-home', {
    events: {
        selected: function(){
            alert('Home selected!');
        }
    }
});

var tab_pages = tabbar.addTab('Pages', 'fa-home');

//Render the tabbar.
tabbar.render();

//Set "home" as active.
tabbar.setActive(tab_home);

✅ You're ready to go! There are many things you can customize, including looks and behaviour. Look at the documentation below to get started.

#📖 Documentation

AppTabBar.Tabbar

Constructor(nodeId, options)

Params

• nodeId The ID of the empty HTML-dom-element you want to use with the tabbar.
• options Options to customize the tabbar.

options

The options-parameter should be inputed as an object, or not at all (to use default-settings).

{
    button_height: 60, //height of the buttons
    tab_selected_style: {
        color: 'orange', 
        background_color: 'black'
    }
}

Example

var tabbar = new AppTabBar.Tabbar('tab_bar', {});

Methods

.init()

Initializes the tabbar and attaches the tabbar object to the HTML DOM-node.

Example

tabbar.init();

.addTab(name, icon, options)

Adds a new tab to the tabbar. Is not visible until Tabbar.render has been run.

Params

• name Display-name/name of the tab.
• icon Font-Awesome icon to display.
• options Options for the tab. See below.

options

The options-parameter should be inputed as an object, or not at all (to use default-settings).

{
	click: {
		preventDefault: false, //prevent default action on click event
		callback: null //custom callback on click-event. Normally used with preventDefault
	},
	events: {
		selected: function(){} //callback-function when tab is selected.
	}
}

Return

Returns the id of the tab. Store this for later reference and manipulation of the tabs. (E.g. selecting the tab.

Example

var tab = tabbar.addTab('home', 'fa-home', {
	events: {
		selected: function(){console.log('home selected!');}
	}
});

.removeTab(tabId)

Removes the specified tab from the tabbar. The change is not visisble until Tabbar.render has been run.

Params

• tabId ID of the speicifed tab. Returne from addTab.

Return

boolean true/false.

Example

var removeResult = tabbar.removeTab(tab);

.selectTab(tabId)

⚠️ This must be run after the tabbar has rendered! ⚠️

Programmatically select the specified tab from the tabbar.

Params

• tabId ID of the speicifed tab. Returne from addTab.

Return

boolean true/false.

Example

var selectResult = tabbar.selectTab(tab);

.render()

Renders the tabbar. This is often a prerequisite for other functions. Should be run every time the tabbar has been altered (when tabs are added / removed).

No params, no return

Example

tabbar.render();