Navigation

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

    linkon

    @linkon

    0
    Reputation
    2
    Posts
    251
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    linkon Follow

    Posts made by linkon

    • RE: Can't open side menu outside tabbar pages

      @emccorson But I need tabbar to swipe between tabbar pages.

      posted in Onsen UI
      L
      linkon
    • Can't open side menu outside tabbar pages

      Hi,
      I need to open side menu on tabbar pages and outside tabbar pages. But I am only able to open it on tabbar pages. Could someone please advice on how to open side menu from outside tabbar pages?

      Here below I have given all the components. I am able to open menu from dashboard page but I also need to open it from member page.

      <!-- Theis is the navigator -->
      <ons-navigator id=“appNavigator” swipeable swipe-target-width=“80px” page=“login.html”>
      </ons-navigator>

      <!-- The Splitter Page -->
      <template id=“home_splitter.html”>
      <ons-page id=“home_splitter”>
      <ons-splitter id=“appSplitter”>
      <ons-splitter-side id=“usermenu” page=“usermenu.html” side=“right” collapse="" width=“200px”>
      </ons-splitter-side>
      <ons-splitter-content page=“tabbar.html”></ons-splitter-content>
      </ons-splitter>
      </ons-page>
      </template>

      <!-- Tabbar -->
      <template id=“tabbar.html”>
      <ons-page id=“tabbar-page”>
      <ons-toolbar>
      <ons-fab class=“right user-icon” onclick=“fn.userMenu()”>
      <img class=“user-img” src=“car.jpg” alt=“User”>
      </ons-fab>
      </ons-toolbar>

          <ons-tabbar swipeable id="appTabbar" position="auto">
              <ons-tab label="Dashboard" icon="ion-home" page="dashboard.html"></ons-tab>
              <ons-tab label="Plan & Reports" icon="ion-home" page="planAndReports.html"></ons-tab>
              <ons-tab label="Support" icon="ion-home" page="support.html"></ons-tab>
          </ons-tabbar>
          </script>
      </ons-page>
      

      </template>

      <!-- Menu–>
      <template id=“usermenu.html”>
      <ons-page>
      <ons-list>
      <ons-list-item onclick=“fn.logout()”>
      <div class=“left”>
      <i class=“icon ion-md-log-out dashboard-icon”></i>
      </div>
      <div class=“center”>
      Sign Out
      </div>
      </ons-list-item>
      </ons-list>
      </ons-page>
      </template>

      <!-- dashboard page -->
      <template id=“dashboard.html”>
      <ons-page>
      <h1>Hi</h1>
      </ons-page>
      </template>

      <!-- member page -->
      <template id=“member.html”>
      <ons-page id=“member”>
      <ons-toolbar>
      <div class=“left”>
      <ons-back-button>Back</ons-back-button>
      </div>
      <div class=“center”>Member</div>
      <ons-fab class=“right user-icon” onclick=“fn.open()”>
      <img class=“user-img” src=“Car.jpg” alt=“User”>
      </ons-fab>
      </ons-toolbar>
      </ons-page>
      </template>

      //here is the .js function
      window.fn.login = function () {
      document.getElementById(‘appNavigator’).pushPage(“home_splitter.html”);
      };

      window.fn.userMenu = function () {
      document.getElementById(‘appSplitter’).right.toggle();
      }

      posted in Onsen UI
      L
      linkon