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

Download tabbar.js and tabbar.css and reference them in your document. 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

Live Demo

Contribute

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

License

MIT-license. See LICENSE-file.