@munsterlander
Magnificent! Your solution seems to works exactly as I intended. Much appreciate your help!
Posts made by kukacdav
-
RE: Hidding tabbar
-
RE: Hidding tabbar
@munsterlander
I have additional question about this pattern. I wanted to add a login page. Therefore I moved the content of the index.html into new main-page.html and in index.html created a simple login page, looking pretty much like following:<html> <head>...</head> <body> <ons-navigator id="main-navigator"> <ons-row> <ons-input class="login-input-field" id="login-username" ></ons-input> </ons-row> <ons-row> <ons-input class="login-input-field" id="login-password" type="password" ></ons-input> </ons-row> <ons-button modifier="large--cta" onclick="login()" id="login-button">Login</ons-button> </ons-navigator> </body> </html>
My login function pushes new page using main-navigator. The main-page is following:
<ons-page id="main-multi-page"> <ons-tabbar id="tabbar"> <ons-tab icon="ion-ios-paper-outline" label="Profil" page="user-detail-page-template" active> </ons-tab> <ons-tab icon="ion-person-stalker" label="Kontakty" page="phone-contacts-page-template"> </ons-tab> <ons-tab icon="ion-ios-settings-strong" label="Aktivity" page="invite-friend-page-template" ></ons-tab> </ons-tabbar> <!-- FIRST PAGE --> <ons-template id="user-detail-page-template"> <ons-page id="user-detail-page"> <ons-list> <ons-list-header>Detail uživatele</ons-list-header> <ons-list-item> <div class="left">Jméno</div> <div class="right" id="username-line"></div> </ons-list-item> <ons-list-item> <div class="left">Telefon</div> <div class="right" id="phone-number-line"></div> </ons-list-item> <ons-list-item> <div class="left">Email</div> <div class="right" id="email-line"></div> </ons-list-item> <ons-list-item> <div class="left">Facebook</div> <div class="right" id="facebook-contact-line"></div> </ons-list-item> </ons-list> </ons-page> </ons-template> <!-- SECOND PAGE TEMPLATE --> <ons-template id="phone-contacts-page-template"> <ons-page id="phone-contacts-page"> <ons-toolbar> <div class="center">Kontakty</div> </ons-toolbar> <ons-list id="contact-list"></ons-list> <ons-row class="contact-toolbar"> <ons-col class="center-block"> <ons-icon icon="ion-search" size="40px"></ons-icon> <p class="contact-button-label">Vyhledat kontakt</p> </ons-col> <ons-col class="center-block"> <ons-icon icon="ion-person-add" size="40px"></ons-icon> <p class="contact-button-label">Vytvořit kontakt</p> </ons-col> <ons-col class="center-block"> <ons-icon icon="ion-star" size="40px"></ons-icon> <p class="contact-button-label">Nastavit oblíbené</p> </ons-col> </ons-row> </ons-page> </ons-template> <!-- THIRD PAGE VIEW --> <ons-template id="invite-friend-page-template"> <ons-page id="invite-friend-page"> <ons-toolbar> <div class="center">Pozvat kamaráda</div> </ons-toolbar> <div class="invite-friend-block"> <ons-icon size="70px" icon="ion-person-add" ></ons-icon> <h1 class="invite-friend-header"> Pozvi kamaráda k používání Bill Me </h1> <p> Nasdílej pozvánku kamarádovi přímo nebo skrze kontakty aplikace</p> </div> <ons-row> <ons-col class="center-block"> <ons-icon size="50px" icon="ion-social-facebook"></ons-icon> <p> Sdílej pozvánku </p> </ons-col> <ons-col class="center-block"> <ons-icon size="50px" icon="ion-person-stalker"></ons-icon> <p> Vyber kontakt </p> </ons-col> </ons-row> </ons-page> </ons-template> </ons-page>
Now what happens: when i look at page in monaca IDE, everything works like charm - I go through login page to main page, where first tab is set as active. But when i run the same code using monaca debugger, I go through login page and land on the last template defined in main-page.html, with no tab visible at all. It seems as if debugger goes through the main-page and doesnt apply tab as I would expect, but it takes into account the last template defined in HTML file.
What I am wondering is, whether my pattern is correct and Monaca Debugger has an issue, or whether I am doing something wrong. Thanks in advance, I spent hours trying to solve this, but nothing seems to work for me…
-
RE: Hidding tabbar
@Fran-Diox Thanks for clarification. I am new to Onsen UI and I am still unable to hide the tabbar - in the meantime I wrote mine own tabbar, but I am experiencing some issues in Monaca debugger, so after all I would like to solve the issue.
I simplified the example to the following:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); document.addEventListener('show', function(event) { var page = event.target; var titleElement = document.querySelector('#toolbar-title'); if (page.matches('#first-page')) { titleElement.innerHTML = 'My app - Page 1'; } else if (page.matches('#second-page')) { titleElement.innerHTML = 'My app - Page 2'; page.querySelector('#magic-button').onclick = function(){console.log("click");document.getElementById('tabbar').setTabbarVisibility('false');}; } }); </script> </head> <body> <ons-page> <ons-toolbar> <div class="center" id="toolbar-title"></div> </ons-toolbar> <ons-tabbar position="auto" id="tabbar"> <ons-tab label="Tab 1" page="tab1.html" active> </ons-tab> <ons-tab label="Tab 2" page="tab2.html"> </ons-tab> </ons-tabbar> </ons-page> <ons-template id="tab1.html"> <ons-page id="first-page"> <p style="text-align: center;"> This is the first page. </p> </ons-page> </ons-template> <ons-template id="tab2.html"> <ons-page id="second-page"> <ons-button id="magic-button">Hide tabbar</ons-button> <p style="text-align: center;"> This is the second page. </p> </ons-page> </ons-template> </body> </html>
The tabbar is still visible no mather what. Any idea what am I doing wrong?
Thanks a lot. -
RE: Hidding tabbar
@munsterlander : I was assuming, that onsen v2 wont be working correctly with Cloud IDE, based on information provided by following page: https://docs.monaca.io/en/onsenui/
So now I am bit confused about the meaning, since every project is using implicitly ver. Does it mean, that onsen v2 will be working, but some features that require Angular2 wont?I have tried your code, running it at page init event, together with attaching event listeners. But no go, tabbar still visible. Any idea what may I be doing wrong?
-
RE: Hidding tabbar
@munsterlander Thanks for reply. Unfortunately Iam using Monaca Cloud IDE, which according to Monaca Docs does not support Angular 2, required for version 2 of Onsen. Any solution for version 1? Or recomendation for another free IDE that might support this?
-
Hidding tabbar
Hi,
I am using tabbar as main navigational element over my application. I have tabbar defined in my index.html and use it to switch over pages. But there are pages in my application, on which I want to hide the tabbar. So I checked the documentaion and found hide-tabs attribute. But when I set it on true, nothing is happening. I even tried to implicitly set it to true but still, tabbar seems imune. What am I missing?
Here are code snippets:
Index.html:<ons-tabbar hide-tabs="true" id="tabbar"> <ons-tab active="true" page="view/html/main-page.html" label="Aktivity" icon="ion-ios-settings-strong" > </ons-tab> <ons-tab page="view/html/user-detail-page.html" label="Profil" icon="ion-ios-paper-outline" > </ons-tab> </ons-tabbar>
main-page.html
<ons-navigator class="pageNavigator"> <ons-page id="main-page"> .... </ons-page> </ons-navigator>