ionic frameworkでサイドメニューを使う

ionic frameworkでサイドメニューを使うサンプルは、本家のサイトにあります。

Side Menu Controller

普通に書くと、こんな感じです。

<side-menus>
  <pane side-menu-content>
    <p>メインコンテンツ</p>
  </pane>
  <side-menu side="left">
    <p>左側のメニュー</p>
  </side>
  <side-menu side="right">
    <p>右側のメニュー</p>
  </side>
</side-menus>

これで動くんですが、nav-barとnav-viewを使った場合はどうするのかがちょっとわかりにくかったので、自分なりに直したのを載せておきます。まずはテンプレート側。

<body ng-app="SelfieGirl">
  <nav-bar animation="nav-title-slide-ios7"
           type="bar-calm"
           back-button-type="button-icon"
           back-button-icon="ion-arrow-left-c">
  </nav-bar>
  <nav-view></nav-view>
</body>

AngularJSのコントローラーとしてCardCtrlをidで指定します。

<side-menus id="CardsCtrl">
  <!-- メインコンテンツ。drag-contentをfalseにすると画面のスライドで表示できなくなる。 -->
  <pane side-menu-content drag-content="false">
    <view title="title"
          left-buttons="leftButtons"
          right-buttons="rightButtons">
      <content has-header="true" padding="true">
        <p>ここがメイン領域</p>
      </content>
    </view>
  </pane>
  <!-- 左サイドメニュー -->
  <side-menu side="left">
    <header class="bar bar-header bar-assertive">
      <div class="title">メニュー</div>
    </header>
    <content has-header="true">
      <list>
        <a href="javascript:void(0)"
           class="item item-icon-lef"
           ng-click="logout()">
          <i class="icon ion-log-out"></i>
          ログアウト
        </a>
        <a href="javascript:void(0)"
           class="item item-icon-lef"
           ng-click="foo()">
          <i class="icon"></i>
          foo
        </a>
        <a href="javascript:void(0)"
           class="item item-icon-lef"
           ng-click="bar()">
          <i class="icon"></i>
          bar
        </a>
      </list>
    </content>
  </side-menu>
  <!-- 右サイドメニュー -->
  <side-menu side="right">
    <header class="bar bar-header bar-assertive">
      <div class="title">メニュー</div>
    </header>
    <content has-header="true">
      <list>
        <item class="item-icon-left">
          hoge
        </item>
        <item class="item-icon-left">
          piyo
        </item>
        <item class="item-icon-left">
          fuga
        </item>
      </list>
    </content>
  </side-menu>
</side-menus>

そして、このサイドバーを表示するための処理をJavaScriptで書きます。
$scope.sideMenuControllerが肝です。

angular.module('SelfieGirl.controllers', [])
  .controller('CardsCtrl', function($scope){
    $scope.title = 'SelfieGirl';
    $scope.leftButtons = [
      {
        type: 'button-clear',
        content: '<i class="icon ion-navicon"></i>',
        tap: function(e) {
          // ヘッダーの左ボタンを押したら左メニュー表示
          $scope.sideMenuController.toggleLeft();
        }
      }
    ];
    $scope.rightButtons = [
      {
        type: 'button-clear',
        content: '<i class="icon ion-navicon"></i>',
        tap: function(e) {
          // ヘッダーの右ボタンを押したら右メニュー表示
          $scope.sideMenuController.toggleRight();
        }
      }
    ];
    $scope.logout = function() {
      // ログアウト処理
    };
    $scope.foo = function(){};
    $scope.bar = function(){};
  });

コントローラーの処理がでかくなってしまうので、もっと細かくサイドバー単位で分割できるかもしれないですが、1画面として管理したいとしたら、上記のような感じになるのかなぁと思います。それにしてもサイドバーの実装がすごく楽ですね。ここはやはりhtml5というところでしょうか。ionic便利ですなぁ。


カテゴリー ionic | タグ | パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です