Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. kukacdav
    K
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    kukacdav

    @kukacdav

    0
    Reputation
    7
    Posts
    1253
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    kukacdav Follow

    Posts made by kukacdav

    • RE: Hidding tabbar

      @munsterlander
      Magnificent! Your solution seems to works exactly as I intended. Much appreciate your help!

      posted in Onsen UI
      K
      kukacdav
    • 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…

      posted in Onsen UI
      K
      kukacdav
    • RE: Hidding tabbar

      @munsterlander Thanks a lot, I will keep that in mind. :)

      posted in Onsen UI
      K
      kukacdav
    • 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.

      posted in Onsen UI
      K
      kukacdav
    • 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?

      posted in Onsen UI
      K
      kukacdav
    • 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?

      posted in Onsen UI
      K
      kukacdav
    • 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>
      
      posted in Onsen UI
      K
      kukacdav