OnsenUI | Mixing UI patterns

Written by on April 9, 2015

OnsenUI | Mixing UI patterns

Sliding menu + Navigation combination

This combination is much easier than the previous one, but we still need to worry about UI pattern hierarchy.

If you take a look at the example below you will see that we’re again starting with sliding menu directive. One part of a directive will point to our menu (menu.html) while the other one will point to the page (home.html) holding list view elements.

Sliding menu list gives you an opportunity to jump between two different list holding pages. Notice one more thing, when you click a list menu, application will transition to detail page (item1.html, item1.html). This new page will not have Sliding menu activation button. That same button usage would/could cause page history order problems.

So when you’re using Navigation pattern (also known as Master Detail pattern) with Sliding menu (or even Tab bar) it’s always advisable to follow regular hierarchy:

Sliding menu <=> Master page <=> Detail page <=> Inner Detail page

Demo

Embeded working example:
OnsenUI Sliding menu + Navigation combination

HTML
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-sliding-menu menu-page="menu.html" main-page="home.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipable="true">
  </ons-sliding-menu>

  <ons-template id="menu.html">
    <ons-page modifier="menu-page">
      <ons-toolbar modifier="transparent"></ons-toolbar>

      <ons-list class="menu-list">
        <ons-list-item class="menu-item" ng-click="menu.setMainPage('home.html', {closeMenu: true})">
          <ons-icon icon="ion-home"></ons-icon>
          List 1
        </ons-list-item>

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('another.html', {closeMenu: true})">
          <ons-icon icon="ion-chatbox-working"></ons-icon>
          List 2
        </ons-list-item>
      </ons-list>

    </ons-page>
  </ons-template>

  <ons-template id="home.html">
    <ons-navigator var="myNav">
      <ons-page>
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button ng-click="menu.toggle()">
              <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
          </div>
          <div class="center">Home Page</div>
        </ons-toolbar>

        <ons-list>
          <ons-list-item ng-click="myNav.pushPage('item1.html')">
            List item 1
          </ons-list-item>
          <ons-list-item ng-click="myNav.pushPage('item2.html')">
            List item 2
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-navigator>
  </ons-template>
  
  <ons-template id="another.html">
    <ons-navigator var="myNav">
      <ons-page>
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button ng-click="menu.toggle()">
              <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
          </div>
          <div class="center">Another List page</div>
        </ons-toolbar>
        <ons-list>
          <ons-list-item ng-click="myNav.pushPage('item1.html')">
            List item 3
          </ons-list-item>
          <ons-list-item ng-click="myNav.pushPage('item2.html')">
            List item 4
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-navigator>
  </ons-template>

  <ons-template id="item1.html">
    <ons-page>
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title</div>
      </ons-toolbar>
    </ons-page>
  </ons-template>
  
  <ons-template id="item2.html">
    <ons-page>
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title2</div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

</body>

</html>
JavaScript
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});

Two Sliding menus combination

This combination is also easy if you follow UI pattern hierarchy.

If you take a look at the example below you will see that we’re again starting with sliding menu directive. One part of a directive will point to our menu (menu.html) while the other one will point to the next Sliding menu (slide1.html) page. Of course one Sliding menu must be on a left side and the other one needs to be on a right side. Second Sliding menu will point to our active page (Tab bar, navigation page or a basic page).

Demo

Embeded working example:
OnsenUI Two Sliding menus combination

HTML
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-sliding-menu main-page="slide1.html" menu-page="menu-left.html" side="left" max-slide-distance="250px" swipable="false" var="leftMenu"></ons-sliding-menu>

  <ons-template id="slide1.html">
    <ons-sliding-menu main-page="slide2.html" menu-page="menu-right.html" side="right" max-slide-distance="250px" swipable="false" var="rightMenu"></ons-sliding-menu>
  </ons-template>

  <ons-template id="slide2.html">
    
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="leftMenu.toggleMenu()">
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="right">
          <ons-toolbar-button ng-click="rightMenu.toggleMenu()">
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Page 1</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
    </ons-page>
    
  </ons-template>

  <ons-template id="menu-left.html">
    <ons-toolbar>
      <div class="center">Left</div>
    </ons-toolbar>
    <p style="text-align: center; padding-top: 100px;">
      <ons-button modifier="light" ng-click="leftMenu.close()">Close</ons-button>
    </p>    
  </ons-template>

  <ons-template id="menu-right.html">
    <ons-toolbar>
      <div class="center">Right</div>
    </ons-toolbar>
    <p style="text-align: center; padding-top: 100px;">
      <ons-button modifier="light" ng-click="rightMenu.close()">Close</ons-button>
    </p>
  </ons-template>

</body>

</html>
JavaScript
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});
Continue Reading

Categories

1 thought on “OnsenUI | Mixing UI patterns”

Leave a Reply