Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ErlendEllingsen/app-tab-bar

A tab-bar system in HTML/JS for hybrid apps / web apps.
https://github.com/ErlendEllingsen/app-tab-bar

Last synced: 1 day ago
JSON representation

A tab-bar system in HTML/JS for hybrid apps / web apps.

Awesome Lists containing this project

README

        

![App-tab-bar](https://i.imgur.com/CLUH1Ws.png)

#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](https://github.com/ErlendEllingsen/app-tab-bar/wiki/Usage) for all methods, options and alternatives. 🌴

**HTML**

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

```html


```

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

```javascript
//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](https://i.imgur.com/kTU0fO2.png)

###Live Demo
* [Demo default style](https://erlendellingsen.github.io/app-tab-bar/live_demo/tabs.html)
* [Demo custom style](https://erlendellingsen.github.io/app-tab-bar/live_demo/tabs_custom_style.html)

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

##License
MIT-license. See *LICENSE*-file.