framework7

Open full view…

Solution: Tab-bar and page link

vptcnt vptcnt
Tue, 10 Jan 2017 14:45:14 GMT

Hi, I wanted a tab-bar with one of the link call a page. So, I did it like this : <div class="toolbar tabbar tabbar-labels "> <div class="toolbar-inner"> <a href="#tab-1" class="tab-link active"> <i class="icon material-icons">event</i> <span class="tabbar-label">Tab1</span> </a> <a href="#tab-2" class="tab-link"> <i class="icon material-icons">school</i> <span class="tabbar-label">Tab2</span> </a> <a href="pages/something.html" class="link"> <i class="icon material-icons">mms</i> <span class="tabbar-label">Tab3</span> </a> <a href="#tab-4" class="tab-link"> <i class="icon material-icons">folder_special</i> <span class="tabbar-label">Tab4</span> </a> </div> </div> The probleme was : the highlight link was calculated only with 3 links, not with 4. The one, Tab3, with the class .link was ignored. So you have to modifiy the code : var tabLinkWidth, highlightTranslate; if (tabbar.hasClass('tabbar-scrollable')) { tabLinkWidth = activeLink[0].offsetWidth + 'px'; highlightTranslate = (app.rtl ? -activeLink[0].offsetLeft : activeLink[0].offsetLeft) + 'px'; } else { tabLinkWidth = 1 / tabbar.find('.tab-link').length * 100 + '%'; highlightTranslate = (app.rtl ? -activeLink.index() : activeLink.index()) * 100 + '%'; } WITH var tabLinkWidth, highlightTranslate; if (tabbar.hasClass('tabbar-scrollable')) { tabLinkWidth = activeLink[0].offsetWidth + 'px'; highlightTranslate = (app.rtl ? -activeLink[0].offsetLeft : activeLink[0].offsetLeft) + 'px'; } else { tabLinkWidth = 1 / tabbar.find('.tab-link,.link').length * 100 + '%'; highlightTranslate = (app.rtl ? -activeLink.index() : activeLink.index()) * 100 + '%'; } Vincent

plpl
Tue, 10 Jan 2017 19:25:57 GMT

--- <a href=“pages/something.html” class=“tab-link link”> --- you should *not* change framework7.js

vptcnt vptcnt
Tue, 10 Jan 2017 22:48:00 GMT

It doesn't work... It can be an update of Framework7 - version 1.5.3

Kerry D
Tue, 10 Jan 2017 23:03:19 GMT

Is the page from a local filesystem or a remote web server? It's not best design practice to load a page from the tabbar.

plpl
Tue, 10 Jan 2017 23:52:33 GMT

you are right my mistake. --- framework.js .7600 var isTabLink; if (clicked.hasClass('tab-link')) { isTabLink = true; app.showTab(clickedData.tab || clicked.attr('href'), clicked); } --- --- framework.js .7600 var validUrl = url && url.length > 0 && url !== '#' && !isTabLink; --- anyway you should never edit framework.js i'll try to find a solution but in the meantime you can *over* write the function on your my-app.js --- //app => myApp //$(tabbar); => $$(tabbar); //app.rtl => myApp.rtl myApp.materialTabbarSetHighlight = function(tabbar, activeLink) { tabbar = $$(tabbar); /*copy here the code*/ }; ---

plpl
Tue, 10 Jan 2017 23:57:23 GMT

--- // framework.js .7600 => framework.js .7668 var validUrl = url && url.length > 0 && url !== '#' && !isTabLink;