├── .gitignore ├── bower.json ├── package.json ├── LICENSE ├── tabbar.css ├── README.md ├── tabbar.min.js ├── examples ├── tabs.html └── tabs_custom_style.html └── tabbar.js /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | bower_components/ 3 | npm-debug.log -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-tab-bar", 3 | "homepage": "https://github.com/ErlendEllingsen/app-tab-bar", 4 | "authors": [ 5 | "Erlend Ellingsen " 6 | ], 7 | "description": "An tab-bar system in HTML/JS for hybrid apps / web apps.", 8 | "main": "", 9 | "keywords": [ 10 | "js", 11 | "cordova", 12 | "phonegap", 13 | "tabs", 14 | "htm", 15 | "hybrid", 16 | "navigation", 17 | "tabbar", 18 | "tab", 19 | "bar" 20 | ], 21 | "license": "MIT", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests" 28 | ], 29 | "dependencies": { 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-tab-bar", 3 | "version": "1.4.1", 4 | "description": "A tab-bar system in HTML/JS for hybrid apps / web apps.", 5 | "main": "tabbar.js", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/ErlendEllingsen/app-tab-bar.git" 15 | }, 16 | "keywords": [ 17 | "tabbar", 18 | "cordova", 19 | "phonegap", 20 | "hybrid", 21 | "tab", 22 | "bar", 23 | "responsive", 24 | "app", 25 | "webapp", 26 | "appdev" 27 | ], 28 | "author": "Erlend Ellingsen ", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/ErlendEllingsen/app-tab-bar/issues" 32 | }, 33 | "homepage": "https://github.com/ErlendEllingsen/app-tab-bar#readme" 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Erlend Ellingsen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /tabbar.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /*Responsiveness*/ 5 | .tb-col-1 {width: 8.33%;} 6 | .tb-col-2 {width: 16.66%;} 7 | .tb-col-3 {width: 25%;} 8 | .tb-col-4 {width: 33.33%;} 9 | .tb-col-5 {width: 41.66%;} 10 | .tb-col-6 {width: 50%;} 11 | .tb-col-7 {width: 58.33%;} 12 | .tb-col-8 {width: 66.66%;} 13 | .tb-col-9 {width: 75%;} 14 | .tb-col-10 {width: 83.33%;} 15 | .tb-col-11 {width: 91.66%;} 16 | .tb-col-12 {width: 100%;} 17 | 18 | 19 | /*Navigation bar*/ 20 | div.navigationBarContainer { 21 | position: fixed; 22 | bottom: 0; 23 | left: 0; 24 | right: 0; 25 | z-index: 0; 26 | } 27 | 28 | div.navigationBar div.navBtnCtn { 29 | float: left; 30 | box-sizing: border-box; 31 | text-align: center; 32 | padding: 0px; 33 | } 34 | 35 | div.navigationBar div.navBtnCtn:after { 36 | clear: both; 37 | } 38 | 39 | div.navigationBar div.navBtnCtn button { 40 | width: 100%; 41 | font-size: 16px; 42 | border-radius: 0px; 43 | outline: none; 44 | height: 60px; 45 | 46 | border-left: 1px solid #000; 47 | border-right:0px; 48 | border-bottom: 0px; 49 | border-top: 1px solid #000; 50 | 51 | color: #333; 52 | background-color: #fff; 53 | border-color: #ccc; 54 | 55 | } 56 | 57 | div.navigationBar div.navBtnCtn button:focus { 58 | outline: 0 !important; 59 | } 60 | 61 | div.navigationBar div.navBtnCtn button:first-child { 62 | border-left: 0px; 63 | } 64 | 65 | div.navigationBar div.navBtnCtn.active button { 66 | background-color: #2965A8; 67 | color: #FFF; 68 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![App-tab-bar](https://i.imgur.com/CLUH1Ws.png) 2 | 3 | #app-tab-bar 4 | 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. 5 | 6 | ##Installation 7 | ###NPM (Recommended) 8 | `npm install app-tab-bar` 9 | 10 | ###Bower 11 | `bower install app-tab-bar` 12 | 13 | ###Direct 14 | 1. Download `tabbar.js` and `tabbar.css` and reference them in your document. 15 | 2. Make sure the *dependencies* are installed (see below). 16 | 17 | ###Dependencies 18 | *No dependencies anymore🔥* 19 | 20 | ##Usage 21 | 🌴 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. 🌴 22 | 23 | **HTML** 24 | 25 | Add an empty div to your code with a specified id. Example: 26 | 27 | ```html 28 |
29 | ``` 30 | 31 | **Javascript** 32 | 33 | 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. 34 | 35 | ```javascript 36 | //Initialize the tabbar 37 | var tabbar = new AppTabBar.Tabbar('tab_bar'); 38 | tabbar.init(); 39 | 40 | //Add tabs 41 | var tab_home = tabbar.addTab('Home', 'fa-home', { 42 | events: { 43 | selected: function(){ 44 | alert('Home selected!'); 45 | } 46 | } 47 | }); 48 | 49 | var tab_pages = tabbar.addTab('Pages', 'fa-home'); 50 | 51 | //Render the tabbar. 52 | tabbar.render(); 53 | 54 | //Set "home" as active. 55 | tabbar.setActive(tab_home); 56 | ``` 57 | 58 | ##Preview / Live Demo 59 | ![Tabs preview](https://i.imgur.com/kTU0fO2.png) 60 | 61 | ###Live Demo 62 | * [Demo default style](https://erlendellingsen.github.io/app-tab-bar/live_demo/tabs.html) 63 | * [Demo custom style](https://erlendellingsen.github.io/app-tab-bar/live_demo/tabs_custom_style.html) 64 | 65 | ##Contribute 66 | Please read the wiki in order to contribute to the project. 67 | 68 | ##License 69 | MIT-license. See *LICENSE*-file. -------------------------------------------------------------------------------- /tabbar.min.js: -------------------------------------------------------------------------------- 1 | var AppTabBar={};AppTabBar.Tabbar=function(nodeId,options){var self=this;this.obj_ID=nodeId;this.obj=null;this.options=options;this.tabbar_spacer=null;this.tabs={tabs_current_uuid:"",tabs_objects:[],tab_selected:null,tab_prev_selected:null,tab_selected_classes:"",tab_unselected_classes:"",active:null};this.init=function(){var tabbarObj=document.getElementById(self.obj_ID);self.tabbar_spacer=document.createElement("div");var div_tabbar=document.createElement("div");tabbarObj.appendChild(self.tabbar_spacer);tabbarObj.appendChild(div_tabbar);self.obj=div_tabbar};this.calculation={};this.calculation.id=0;this.calculation.columnsCalculated=null;this.calculation.uniqueId=function(){self.calculation.id++;return Number(self.calculation.id.toString())};this.calculation.calculateColumns=function(){var numTabs=self.tabs.tabs_objects.length;var columns=12/numTabs;var validColumns=[2,3,4,6,12];if(validColumns.indexOf(columns)==-1){throw"calculateColumns invalid_columns"}self.calculation.columnsCalculated=columns};this.findTab=function(tabId){var foundTab=false;var tabIndex=0;var tab=null;for(var i=0;i'+'\t
'+"\t
"+"";var bar_obj=self.obj.children[0].children[0];for(var i=0;i'+'\t'+self.icon+" "+""+self.name+"";tabCode.innerHTML=btnContent;var button=tabCode.children[0];if("button_height"in self.tabbar.options)button.style.height=self.tabbar.options.button_height;if("font_size"in self.tabbar.options)button.style.fontSize=self.tabbar.options.font_size;button.addEventListener("click",self.events.click);button.addEventListener("touchstart",self.events.click);self.obj=tabCode;return tabCode}}; 2 | -------------------------------------------------------------------------------- /examples/tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | app-tab-bar tabs example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 22 | 23 | 24 | 25 | 26 | 27 |

Tabs!

28 | 29 |
30 |

Home

31 |

32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vehicula mauris, vitae congue ipsum. Morbi ut ante rhoncus, ultricies est sed, tincidunt ante. Mauris interdum eros eget fringilla accumsan. Nam sed tellus feugiat, efficitur sapien et, iaculis erat. Quisque quis molestie erat. Proin dapibus, enim eget porta posuere, urna turpis consequat arcu, sit amet laoreet nisl velit vel libero. Nulla ut euismod leo, eget semper dui. Nulla id ipsum non enim imperdiet consequat. Integer interdum placerat nibh, ac convallis diam scelerisque non. Sed in tempus nisi, ac tristique urna. Aliquam interdum aliquet risus, nec condimentum mi ultricies ut. Quisque in augue vehicula, feugiat velit at, vulputate nulla. Vestibulum ornare tellus at commodo condimentum. Sed metus nibh, iaculis ut commodo nec, fermentum quis elit. Aenean finibus finibus ullamcorper. Cras vitae dictum purus. 33 | 34 | Morbi non lacinia nisl. Morbi vel ante ac eros tincidunt eleifend. Sed ut condimentum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam et augue at arcu auctor faucibus. In feugiat felis eu interdum elementum. Proin orci tortor, finibus non convallis quis, mollis vitae metus. Aliquam eu tincidunt dui, non congue dui. Mauris erat dui, luctus eu mollis a, bibendum at nibh. Donec laoreet pharetra libero ut lobortis. Integer aliquet et ligula ac fringilla. Ut metus urna, aliquam sit amet ultricies in, ullamcorper sit amet lorem. Proin a eleifend neque, bibendum luctus felis. 35 | 36 | Donec varius sapien urna, tincidunt posuere ipsum placerat eget. Suspendisse potenti. Nullam ut massa venenatis, maximus lectus in, lacinia mi. Nam vel sem sagittis, fringilla mi nec, facilisis nisl. Maecenas urna erat, placerat in gravida a, placerat nec lacus. Fusce interdum, ipsum sit amet efficitur pulvinar, urna nisi maximus ipsum, a pellentesque urna velit vel urna. Aenean consectetur interdum augue ut feugiat. Vestibulum at risus sodales, pellentesque est a, consequat libero. Mauris vitae velit ac velit interdum scelerisque. Integer sodales dignissim ante sodales pharetra. Donec libero nisl, ultricies nec finibus ac, imperdiet in nisi. Nullam eget tempor sapien. 37 | 38 | Vestibulum maximus volutpat diam, ut lacinia nunc sodales auctor. Cras sapien magna, facilisis vel commodo at, hendrerit vitae enim. Vestibulum euismod tellus sit amet mi auctor lacinia. Nulla sodales nisl vel ornare feugiat. Aenean ultrices ultrices aliquam. Mauris quis ante commodo nisi placerat efficitur quis eu tortor. Donec pharetra sollicitudin magna. Cras sollicitudin lectus sapien, ut faucibus dolor hendrerit nec. Phasellus non dolor metus. Cras faucibus mattis enim eu suscipit. Sed blandit sapien quis viverra aliquam. Sed vestibulum nulla quis consequat rutrum. Nullam in libero accumsan, suscipit tortor et, ultrices ipsum. 39 | 40 | Donec rhoncus tristique elit, a facilisis nulla egestas a. Donec elementum convallis lorem in porttitor. Morbi tristique, odio quis pharetra tincidunt, urna metus fermentum lorem, ut porta turpis erat placerat nunc. Pellentesque eleifend nisi arcu, cursus porttitor enim ornare sed. Ut eget magna ut mi dignissim fermentum sed id massa. Nullam pellentesque ipsum erat, a efficitur nibh viverra ut. Suspendisse dapibus sodales elit vel consectetur. Phasellus vehicula est ut urna aliquet, nec dictum mi scelerisque. Mauris blandit tempor egestas. Donec nec lorem commodo, bibendum ligula a, molestie erat. Nam a nunc massa. 41 | 42 | Nulla pretium in neque vel ullamcorper. Sed ullamcorper in quam vel lobortis. Mauris vulputate id velit at sodales. Integer nec euismod ante. Aenean feugiat venenatis urna. Nunc id arcu tempor, auctor lectus ut, ultrices mi. Etiam ullamcorper molestie arcu, eget euismod eros. Integer facilisis nulla vitae nulla consectetur, vitae placerat quam consectetur. Nunc pellentesque fringilla arcu eget mollis. Donec erat libero, gravida eu libero vel, auctor elementum neque. In fringilla, dolor at vulputate lacinia, magna quam faucibus libero, ac efficitur ipsum ipsum in elit. Curabitur vel diam ut erat tempor accumsan. In eleifend eget augue eu vulputate. 43 |

44 |
45 |
46 |

About

47 |

48 | Donec rhoncus tristique elit, a facilisis nulla egestas a. Donec elementum convallis lorem in porttitor. Morbi tristique, odio quis pharetra tincidunt, urna metus fermentum lorem, ut porta turpis erat placerat nunc. Pellentesque eleifend nisi arcu, cursus porttitor enim ornare sed. Ut eget magna ut mi dignissim fermentum sed id massa. Nullam pellentesque ipsum erat, a efficitur nibh viverra ut. Suspendisse dapibus sodales elit vel consectetur. Phasellus vehicula est ut urna aliquet, nec dictum mi scelerisque. Mauris blandit tempor egestas. Donec nec lorem commodo, bibendum ligula a, molestie erat. Nam a nunc massa. 49 | 50 | Nulla pretium in neque vel ullamcorper. Sed ullamcorper in quam vel lobortis. Mauris vulputate id velit at sodales. Integer nec euismod ante. Aenean feugiat venenatis urna. Nunc id arcu tempor, auctor lectus ut, ultrices mi. Etiam ullamcorper molestie arcu, eget euismod eros. Integer facilisis nulla vitae nulla consectetur, vitae placerat quam consectetur. Nunc pellentesque fringilla arcu eget mollis. Donec erat libero, gravida eu libero vel, auctor elementum neque. In fringilla, dolor at vulputate lacinia, magna quam faucibus libero, ac efficitur ipsum ipsum in elit. Curabitur vel diam ut erat tempor accumsan. In eleifend eget augue eu vulputate. 51 | 52 | Aliquam pretium fermentum risus a volutpat. Ut lorem ipsum, tristique sed blandit in, auctor eget leo. Vivamus faucibus massa lectus, id vehicula ligula consectetur in. Nulla finibus posuere urna, sed suscipit mauris rutrum eget. Nunc mattis eros iaculis nulla tincidunt, ut vehicula ipsum efficitur. Nulla at diam dolor. Pellentesque viverra, nibh in suscipit fermentum, libero nibh congue libero, non condimentum sem dolor a sem. Morbi pharetra turpis lorem, eget condimentum odio varius ac. Morbi maximus arcu vel ligula aliquet rhoncus. 53 | 54 | Duis mattis purus id quam finibus, ac congue purus egestas. Donec vehicula tristique risus, eu euismod augue mollis at. Integer tincidunt libero non nulla suscipit, eu condimentum dui posuere. Nunc iaculis augue elit, ac euismod velit ultricies et. Nam ut ipsum id diam laoreet pretium. Donec gravida dolor sed tortor dictum aliquet. Fusce mollis vulputate urna nec pharetra. Nullam nec mollis erat, ac luctus velit. Aliquam finibus risus in magna rutrum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras euismod fermentum nisl vitae congue. Nullam sodales sed augue ut ultrices. Sed fringilla ipsum consectetur massa vehicula feugiat. Integer gravida massa quis magna porta tempor. 55 |

56 |
57 | 58 | 59 | 60 |
61 |
62 | 63 | 64 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /tabbar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * app-tab-bar 3 | * 4 | * A tab-bar system in HTML/JS for hybrid apps / web apps. 5 | * https://github.com/ErlendEllingsen/app-tab-bar 6 | * 7 | * 8 | * @author Erlend Ellingsen 9 | * @copyright MIT, Erlend Ellingsen 10 | * @version 1.4 03.02.2017 11 | */ 12 | 13 | var AppTabBar = {}; 14 | 15 | 16 | AppTabBar.Tabbar = function(nodeId, options) { 17 | 18 | //--- VARS --- 19 | 20 | var self = this; 21 | 22 | //Vars: objects main 23 | this.obj_ID = nodeId; 24 | this.obj = null; //DOM-object 25 | 26 | this.options = options; 27 | 28 | this.tabbar_spacer = null; 29 | 30 | //Tabs 31 | this.tabs = { 32 | tabs_current_uuid: '', 33 | tabs_objects: [], 34 | tab_selected: null, 35 | tab_prev_selected: null, 36 | tab_selected_classes: '', 37 | tab_unselected_classes: '', 38 | active: null 39 | }; 40 | 41 | //--- INIT & MAIN --- 42 | 43 | this.init = function() { 44 | 45 | var tabbarObj = document.getElementById(self.obj_ID); 46 | 47 | self.tabbar_spacer = document.createElement('div'); 48 | var div_tabbar = document.createElement('div'); 49 | 50 | tabbarObj.appendChild(self.tabbar_spacer); 51 | tabbarObj.appendChild(div_tabbar); 52 | 53 | self.obj = div_tabbar; 54 | 55 | 56 | } 57 | 58 | //--- CALCULATION METHODS --- 59 | this.calculation = {}; 60 | this.calculation.id = 0; 61 | this.calculation.columnsCalculated = null; 62 | 63 | this.calculation.uniqueId = function() { 64 | self.calculation.id++; 65 | return Number(self.calculation.id.toString()); 66 | } 67 | 68 | this.calculation.calculateColumns = function() { 69 | var numTabs = self.tabs.tabs_objects.length; 70 | var columns = (12 / numTabs); 71 | 72 | var validColumns = [2,3,4,6,12]; 73 | if (validColumns.indexOf(columns) == -1) { 74 | throw 'calculateColumns invalid_columns'; 75 | } 76 | 77 | self.calculation.columnsCalculated = columns; 78 | // 2,3,4,6,12 79 | 80 | } 81 | 82 | 83 | //--- TABS FUNCTIONS --- 84 | this.findTab = function(tabId) { 85 | var foundTab = false; 86 | var tabIndex = 0; 87 | var tab = null; 88 | 89 | //FIND ELEMENT 90 | 91 | for (var i = 0; i < self.tabs.tabs_objects.length; i++) { 92 | var tempTab = self.tabs.tabs_objects[i]; 93 | if (tempTab.id == tabId) { 94 | tabIndex = i; 95 | foundTab = true; 96 | tab = tempTab; 97 | break; 98 | } 99 | 100 | //end for-loop 101 | } 102 | 103 | if (!foundTab) return false; 104 | return { 105 | tab: tab, 106 | tabIndex: tabIndex 107 | }; 108 | } 109 | 110 | this.addTab = function(name, icon, options){ 111 | 112 | var tabId = self.calculation.uniqueId(); 113 | 114 | //Create object 115 | var tab = new AppTabBar.Tab(tabId, name, icon, options, self); 116 | 117 | self.tabs.tabs_objects.push(tab); 118 | 119 | return tabId; 120 | 121 | } 122 | 123 | this.removeTab = function(tabId) { 124 | 125 | var tabObj = self.findTab(tabId); 126 | if (tabObj === false) return; 127 | 128 | //REMOVE ELEMENTS 129 | 130 | //Remove DOM object 131 | tabObj.tab.obj.parentElement.removeChild(tabObj.tab.obj); 132 | 133 | //Remove from array. 134 | self.tabs.tabs_objects.splice(tabObj.tabIndex, 1); 135 | 136 | return true; 137 | 138 | 139 | } 140 | 141 | this.selectTab = function(tabId) { 142 | 143 | var tabObj = self.findTab(tabId); 144 | if (tabObj === false) return; 145 | 146 | //Ensure that the object is rendered. 147 | if (tabObj.tab.rendered == false) { 148 | throw 'selectTab render_before_selecting'; 149 | return false; 150 | } 151 | 152 | 153 | //Unset current tab 154 | if (self.tabs.tab_selected !== null) { 155 | self.tabs.tab_selected.obj.setAttribute('class', self.tabs.tab_unselected_classes); 156 | self.tabs.tab_prev_selected = self.tabs.tab_selected; 157 | } 158 | 159 | //Set new tab 160 | self.tabs.tab_selected = tabObj.tab; 161 | 162 | //If the same, don't hide (causes errors with styling) 163 | if (self.tabs.tab_selected == self.tabs.tab_prev_selected) self.tabs.tab_prev_selected = null; 164 | 165 | //Hide tab 166 | self.tabs.tab_selected.obj.style.display = 'none'; 167 | 168 | self.tabs.tab_selected.obj.setAttribute('class', self.tabs.tab_selected_classes); 169 | 170 | //ADJUST STYLES 171 | if ('tab_selected_style' in self.options) { 172 | 173 | var style = self.options.tab_selected_style; 174 | 175 | if ('color' in self.options.tab_selected_style) { 176 | self.tabs.tab_selected.obj.children[0].style.color = style.color; 177 | if (self.tabs.tab_prev_selected != null) self.tabs.tab_prev_selected.obj.children[0].style.color = ''; 178 | } 179 | 180 | if ('background_color' in self.options.tab_selected_style) { 181 | self.tabs.tab_selected.obj.children[0].style.backgroundColor = style.background_color; 182 | if (self.tabs.tab_prev_selected != null) self.tabs.tab_prev_selected.obj.children[0].style.backgroundColor = ''; 183 | } 184 | 185 | } 186 | 187 | //Show tab 188 | self.tabs.tab_selected.obj.style.display = 'block'; 189 | 190 | //Call selected callback.. 191 | tabObj.tab.events.selected(); 192 | 193 | return true; 194 | //end selectTab 195 | } 196 | 197 | //--- RENDERING & BIND --- 198 | 199 | this.render = function() { 200 | 201 | //PREPARE DATA 202 | self.calculation.calculateColumns(); 203 | var cols = self.calculation.columnsCalculated; 204 | 205 | //RENDER 206 | //Render styles 207 | self.tabs.tab_selected_classes = 'navBtnCtn active tb-col-' + cols; 208 | self.tabs.tab_unselected_classes = 'navBtnCtn tb-col-' + cols; 209 | 210 | //Empty div 211 | self.obj.innerHTML = ''; 212 | 213 | //Generate container 214 | self.obj.innerHTML = '' + 215 | '
' + 216 | '
' + 217 | '
' + 218 | '
'; 219 | 220 | //Load objects 221 | 222 | var bar_obj = self.obj.children[0].children[0]; 223 | 224 | //Add tabs 225 | for (var i = 0; i < self.tabs.tabs_objects.length; i++) { 226 | var tab = self.tabs.tabs_objects[i]; 227 | var tabCode = tab.renderCode(); 228 | 229 | bar_obj.appendChild(tabCode); 230 | 231 | tab.rendered = true; 232 | } 233 | 234 | //Create SPACER 235 | self.tabbar_spacer.style.marginBottom = self.obj.children[0].scrollHeight; 236 | 237 | 238 | //end render 239 | } 240 | 241 | this.bind = function() { 242 | 243 | } 244 | 245 | // --- EVENTS --- 246 | 247 | 248 | // END Tabbar 249 | } 250 | 251 | 252 | AppTabBar.Tab = function(id, name, icon, options, tabbar) { 253 | 254 | 255 | //VARS 256 | //References 257 | var self = this; 258 | this.tabbar = tabbar; 259 | 260 | //Properties 261 | this.id = id; 262 | this.name = name; 263 | this.icon = icon; 264 | this.obj = null; 265 | 266 | //Tab render status 267 | this.rendered = false; //Control if rendered. 268 | 269 | //Events 270 | this.events = {}; 271 | this.events.click = function(e) { 272 | e.stopPropagation(); 273 | e.preventDefault(); 274 | 275 | //Check for override-action 276 | if (self.options.click.preventDefault == true) { 277 | self.options.click.callback(); 278 | return; 279 | } 280 | 281 | //Default action 282 | self.tabbar.selectTab(self.id); 283 | } 284 | this.events.selected = function() { 285 | //to be implemented. 286 | console.log('Tab events.selected not implemented'); 287 | } 288 | 289 | //Options 290 | this.options = { 291 | click: { 292 | preventDefault: false, 293 | callback: null 294 | }, 295 | events: { 296 | selected: self.events.selected 297 | } 298 | }; //for reference 299 | 300 | //END VARS 301 | 302 | //INIT 303 | this.init = function() { 304 | if (options != undefined) self.initSetupOptions(); 305 | } 306 | 307 | this.initSetupOptions = function() { 308 | 309 | if ('click' in options) { 310 | if ('preventDefault' in options.click) self.options.click.preventDefault = options.click.preventDefault; 311 | if ('callback' in options.click) self.options.click.callback = options.click.callback; 312 | } 313 | 314 | if ('events' in options) { 315 | if ('selected' in options.events) self.events.selected = options.events.selected; 316 | } 317 | 318 | } 319 | 320 | //call init 321 | this.init(); 322 | 323 | //FUNCTIONS 324 | 325 | this.renderCode = function() { 326 | 327 | 328 | var tabCode = document.createElement('div'); 329 | tabCode.setAttribute('class', self.tabbar.tabs.tab_unselected_classes); 330 | 331 | var btnContent = '' + 332 | ''; 336 | 337 | tabCode.innerHTML = btnContent; 338 | 339 | var button = tabCode.children[0]; 340 | 341 | //Apply eventual styles 342 | if ('button_height' in self.tabbar.options) button.style.height = self.tabbar.options.button_height; 343 | if ('font_size' in self.tabbar.options) button.style.fontSize = self.tabbar.options.font_size; 344 | 345 | //Apply events 346 | button.addEventListener("click", self.events.click); 347 | button.addEventListener("touchstart", self.events.click); 348 | 349 | self.obj = tabCode; 350 | return tabCode; 351 | 352 | } 353 | 354 | //END Tab 355 | } 356 | -------------------------------------------------------------------------------- /examples/tabs_custom_style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | app-tab-bar tabs example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 22 | 23 | 24 | 25 | 26 | 27 |

Tabs!

28 | 29 |
30 |

Home

31 |

32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vehicula mauris, vitae congue ipsum. Morbi ut ante rhoncus, ultricies est sed, tincidunt ante. Mauris interdum eros eget fringilla accumsan. Nam sed tellus feugiat, efficitur sapien et, iaculis erat. Quisque quis molestie erat. Proin dapibus, enim eget porta posuere, urna turpis consequat arcu, sit amet laoreet nisl velit vel libero. Nulla ut euismod leo, eget semper dui. Nulla id ipsum non enim imperdiet consequat. Integer interdum placerat nibh, ac convallis diam scelerisque non. Sed in tempus nisi, ac tristique urna. Aliquam interdum aliquet risus, nec condimentum mi ultricies ut. Quisque in augue vehicula, feugiat velit at, vulputate nulla. Vestibulum ornare tellus at commodo condimentum. Sed metus nibh, iaculis ut commodo nec, fermentum quis elit. Aenean finibus finibus ullamcorper. Cras vitae dictum purus. 33 | 34 | Morbi non lacinia nisl. Morbi vel ante ac eros tincidunt eleifend. Sed ut condimentum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam et augue at arcu auctor faucibus. In feugiat felis eu interdum elementum. Proin orci tortor, finibus non convallis quis, mollis vitae metus. Aliquam eu tincidunt dui, non congue dui. Mauris erat dui, luctus eu mollis a, bibendum at nibh. Donec laoreet pharetra libero ut lobortis. Integer aliquet et ligula ac fringilla. Ut metus urna, aliquam sit amet ultricies in, ullamcorper sit amet lorem. Proin a eleifend neque, bibendum luctus felis. 35 | 36 | Donec varius sapien urna, tincidunt posuere ipsum placerat eget. Suspendisse potenti. Nullam ut massa venenatis, maximus lectus in, lacinia mi. Nam vel sem sagittis, fringilla mi nec, facilisis nisl. Maecenas urna erat, placerat in gravida a, placerat nec lacus. Fusce interdum, ipsum sit amet efficitur pulvinar, urna nisi maximus ipsum, a pellentesque urna velit vel urna. Aenean consectetur interdum augue ut feugiat. Vestibulum at risus sodales, pellentesque est a, consequat libero. Mauris vitae velit ac velit interdum scelerisque. Integer sodales dignissim ante sodales pharetra. Donec libero nisl, ultricies nec finibus ac, imperdiet in nisi. Nullam eget tempor sapien. 37 | 38 | Vestibulum maximus volutpat diam, ut lacinia nunc sodales auctor. Cras sapien magna, facilisis vel commodo at, hendrerit vitae enim. Vestibulum euismod tellus sit amet mi auctor lacinia. Nulla sodales nisl vel ornare feugiat. Aenean ultrices ultrices aliquam. Mauris quis ante commodo nisi placerat efficitur quis eu tortor. Donec pharetra sollicitudin magna. Cras sollicitudin lectus sapien, ut faucibus dolor hendrerit nec. Phasellus non dolor metus. Cras faucibus mattis enim eu suscipit. Sed blandit sapien quis viverra aliquam. Sed vestibulum nulla quis consequat rutrum. Nullam in libero accumsan, suscipit tortor et, ultrices ipsum. 39 | 40 | Donec rhoncus tristique elit, a facilisis nulla egestas a. Donec elementum convallis lorem in porttitor. Morbi tristique, odio quis pharetra tincidunt, urna metus fermentum lorem, ut porta turpis erat placerat nunc. Pellentesque eleifend nisi arcu, cursus porttitor enim ornare sed. Ut eget magna ut mi dignissim fermentum sed id massa. Nullam pellentesque ipsum erat, a efficitur nibh viverra ut. Suspendisse dapibus sodales elit vel consectetur. Phasellus vehicula est ut urna aliquet, nec dictum mi scelerisque. Mauris blandit tempor egestas. Donec nec lorem commodo, bibendum ligula a, molestie erat. Nam a nunc massa. 41 | 42 | Nulla pretium in neque vel ullamcorper. Sed ullamcorper in quam vel lobortis. Mauris vulputate id velit at sodales. Integer nec euismod ante. Aenean feugiat venenatis urna. Nunc id arcu tempor, auctor lectus ut, ultrices mi. Etiam ullamcorper molestie arcu, eget euismod eros. Integer facilisis nulla vitae nulla consectetur, vitae placerat quam consectetur. Nunc pellentesque fringilla arcu eget mollis. Donec erat libero, gravida eu libero vel, auctor elementum neque. In fringilla, dolor at vulputate lacinia, magna quam faucibus libero, ac efficitur ipsum ipsum in elit. Curabitur vel diam ut erat tempor accumsan. In eleifend eget augue eu vulputate. 43 |

44 |
45 |
46 |

About

47 |

48 | Donec rhoncus tristique elit, a facilisis nulla egestas a. Donec elementum convallis lorem in porttitor. Morbi tristique, odio quis pharetra tincidunt, urna metus fermentum lorem, ut porta turpis erat placerat nunc. Pellentesque eleifend nisi arcu, cursus porttitor enim ornare sed. Ut eget magna ut mi dignissim fermentum sed id massa. Nullam pellentesque ipsum erat, a efficitur nibh viverra ut. Suspendisse dapibus sodales elit vel consectetur. Phasellus vehicula est ut urna aliquet, nec dictum mi scelerisque. Mauris blandit tempor egestas. Donec nec lorem commodo, bibendum ligula a, molestie erat. Nam a nunc massa. 49 | 50 | Nulla pretium in neque vel ullamcorper. Sed ullamcorper in quam vel lobortis. Mauris vulputate id velit at sodales. Integer nec euismod ante. Aenean feugiat venenatis urna. Nunc id arcu tempor, auctor lectus ut, ultrices mi. Etiam ullamcorper molestie arcu, eget euismod eros. Integer facilisis nulla vitae nulla consectetur, vitae placerat quam consectetur. Nunc pellentesque fringilla arcu eget mollis. Donec erat libero, gravida eu libero vel, auctor elementum neque. In fringilla, dolor at vulputate lacinia, magna quam faucibus libero, ac efficitur ipsum ipsum in elit. Curabitur vel diam ut erat tempor accumsan. In eleifend eget augue eu vulputate. 51 | 52 | Aliquam pretium fermentum risus a volutpat. Ut lorem ipsum, tristique sed blandit in, auctor eget leo. Vivamus faucibus massa lectus, id vehicula ligula consectetur in. Nulla finibus posuere urna, sed suscipit mauris rutrum eget. Nunc mattis eros iaculis nulla tincidunt, ut vehicula ipsum efficitur. Nulla at diam dolor. Pellentesque viverra, nibh in suscipit fermentum, libero nibh congue libero, non condimentum sem dolor a sem. Morbi pharetra turpis lorem, eget condimentum odio varius ac. Morbi maximus arcu vel ligula aliquet rhoncus. 53 | 54 | Duis mattis purus id quam finibus, ac congue purus egestas. Donec vehicula tristique risus, eu euismod augue mollis at. Integer tincidunt libero non nulla suscipit, eu condimentum dui posuere. Nunc iaculis augue elit, ac euismod velit ultricies et. Nam ut ipsum id diam laoreet pretium. Donec gravida dolor sed tortor dictum aliquet. Fusce mollis vulputate urna nec pharetra. Nullam nec mollis erat, ac luctus velit. Aliquam finibus risus in magna rutrum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras euismod fermentum nisl vitae congue. Nullam sodales sed augue ut ultrices. Sed fringilla ipsum consectetur massa vehicula feugiat. Integer gravida massa quis magna porta tempor. 55 |

56 |
57 | 58 | 59 | 60 |
61 |
62 | 63 | 64 | 104 | 105 | 106 | 107 | --------------------------------------------------------------------------------