ionic frameworkでサイドメニューを使うサンプルは、本家のサイトにあります。
普通に書くと、こんな感じです。
<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便利ですなぁ。
