App-tab-bar

app-tab-bar

A tab-bar system in HTML/JS for hybrid apps / web apps. Creates beautiful tabs in Bootstrap-style. Designed to work with Phonegap/Cordova. Created as a multi-platform-purpose system.

Installation

NPM (Recommended)

npm install app-tab-bar

Bower

bower install app-tab-bar

Direct

  1. Download tabbar.js and tabbar.css and reference them in your document.
  2. Make sure the dependencies are installed (see below).

Dependencies

No dependencies anymore🔥

Usage

🌴 This is a quick usage guide. Read the usage wiki page for all methods, options and alternatives. 🌴

HTML

Add an empty div to your code with a specified id. Example:

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

Javascript

Add your own tabbar-code to your javascript. Initialize the tabbar object and select the HTML-object you added. Add tabs and then finally render.

//Initialize the tabbar
var tabbar = new AppTabBar.Tabbar('tab_bar');
tabbar.init();

//Add tabs
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);

Preview / Live Demo

Tabs preview

Live Demo

Contribute

Please read the wiki in order to contribute to the project.

License

MIT-license. See LICENSE-file.