Navigation

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

    phyllito

    @phyllito

    0
    Reputation
    3
    Posts
    696
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    phyllito Follow

    Posts made by phyllito

    • RE: Cannot load pages outside of tabbar and navigator

      @Fran-Diox if you look at the kitchensink example: http://tutorial.onsen.io/?framework=vanilla&category=common patterns&module=kitchensink

      When you open the menu, the page slide to the left to reveal the menu on the right (kind of popping from underneath the page.

      But now it’s like this: http://tutorial.onsen.io/?framework=vanilla&category=reference&module=splitter
      where the page doesn’t move but the side menu just slides in in front of the page.

      I preferred the first one and I don’t know why it changed by just moving the page out of the navigator.

      posted in Onsen UI
      P
      phyllito
    • RE: Cannot load pages outside of tabbar and navigator

      @Fran-Diox Thanks, i’ve gone with removing the page from the navigator and it works as expected. However I lose the nice effect of the menu moving the current page as it slides from the right instead of it sliding on top of the current page. If you have a solution to that it would be awesome however the main issue is solved.

      posted in Onsen UI
      P
      phyllito
    • Cannot load pages outside of tabbar and navigator

      Hi, I am using the onsen UI kitchen sink application as the basis of my application.
      I am having trouble with loading a page before the tabbar. What I want to achieve is when the app starts up, a loading page(splash screen) pops up instead with a loading wheel, after whatever logic, redirect the user to a sign in page or the home screen(the tab bar). So far I have only been able to load the start up page by adding a second navigator (I have tried other ways, this is the only way it worked). When I do this though, I face another issue which is I can’t navigate off that start up page even when I add a button to manually.

      Most of my pages are in their own separate files but for the purpose of this I have moved the start up page to the same index file.

      Please see the code below, as you can see I’ve commented out the second navigator, which if I uncomment works but can’t navigate off it. I have tried adding page="startup2.html" to the appNavigator and that doesn’t work.

      I have also tried the loadView and pushPage for the button none of which worked.

      Thank you and apologies if this is basic but I have stuck on this for a couple of days.

      Index

        <!--Tabbar navigation-->
        <ons-navigator id="appNavigator">
          <ons-page>
            <ons-splitter id="appSplitter">
              <ons-splitter-side id="moremenu" page="moremenu.html" swipeable side="right" collapse="" width="260px"></ons-splitter-side>
              <ons-splitter-content>
                <ons-page>
                  <ons-toolbar>
                    <div class="center">FACT</div>
                    <div class="right">
                      <ons-toolbar-button onclick="fn.toggleMenu()">
                        <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
                      </ons-toolbar-button>
                    </div>
                  </ons-toolbar>
                  <ons-tabbar id="appTabbar" position="auto">
                    <ons-tab label="Home" icon="ion-home" page="view/home.html" active></ons-tab>
                    <ons-tab label="Charts" icon="ion-arrow-graph-down-right" page="view/charts.html"></ons-tab>
                    <ons-tab label="Animations" icon="ion-film-marker" page="view/preview.html"></ons-tab>
                    <ons-tab label="More" icon="ion-more" onclick="fn.toggleMenu()"></ons-tab>
                  </ons-tabbar>
                </ons-page>
              </ons-splitter-content>
            </ons-splitter>
          </ons-page>
        </ons-navigator>
      
        <!--<ons-navigator id="myNavigator" page="startup2.html"></ons-navigator>-->
      
      <template id="startup2.html">
      <ons-page id="startup2">
          <div style="text-align: center; margin: 40px; color: #666">
              <p>
                <ons-progress-circular class="progressStyle" indeterminate></ons-progress-circular>
              </p>
              <ons-list>
              <ons-list-item onclick="fn.load('homepage.html')" tappable>
                <div class="left">
                  <ons-icon fixed-width class="list-item__icon" icon="ion-home, material:md-home"></ons-icon>
                </div>
                <div class="center">
                  Home
                </div>
                <div class="right">
                  <ons-icon icon="fa-link"></ons-icon>
                </div>
              </ons-list-item>
              </ons-list>
          </div>
      </ons-page>
      </template>
      
      

      Navigation

      // Navigation for the application
      
      window.fn = {};
      
      window.fn.toggleMenu = function () {
        document.getElementById('appSplitter').right.toggle();
      };
      
      window.fn.loadView = function (index) {
        document.getElementById('appTabbar').setActiveTab(index);
        document.getElementById('moremenu').close();
      };
      
      window.fn.loadLink = function (url) {
        window.open(url, '_blank');
      };
      
      window.fn.pushPage = function (page, anim) {
        if (anim) {
          document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title }, animation: anim });
        } else {
          document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title } });
        }
      };
      
      window.fn.load = function (page) {
        // var menu = document.getElementById('menu');
        var navi = document.getElementById('myNavigator');
      
        // menu.close();
        var currentPage = navi.getAttribute('page');
        if (currentPage != page) {
          navi.setAttribute('page', page);
          navi.resetToPage(page, {
            animation: 'fade'
          });
        }
      };
      
      ons.ready(function () {
        const moremenu = document.getElementById('appSplitter');
        ons.platform.isAndroid() ? moremenu.right.setAttribute('animation', 'overlay') : moremenu.right.setAttribute('animation', 'reveal');
      })
      
      posted in Onsen UI
      P
      phyllito