(cache) Onsen UI Tips - ons-tabbar と localStorage を使ってネイティブアプリのようなタブバーを作る方法

Onsen UI Tips - ons-tabbar と localStorage を使ってネイティブアプリのようなタブバーを作る方法

phi on Onsen UI 30 November 2015

Introduction

Onsen UI Tips です.

今回は, ユーティリティ系のネイティブアプリでよく見るタブバー. これを Web で実現する方法について紹介します.

ons-tabbar ってやつを使えば簡単です♪

Runstant Demo

とりあえずデモです.

フッター部分にタブバーが表示されています. また, localStorage を使っているので画面を更新しても前回選択していたタブの位置が保持されているのがわかるかとおもいます.

タブバーがあるだけで俄然アプリっぽくなりますね.

Code

html

<body>  
  <ons-page>
    <ons-tabbar>
      <ons-tab page='home.html' label='home' icon='ion-home' active='true'></ons-tab>
      <ons-tab page='comment.html' label='comment' icon='ion-chatbox-working'></ons-tab>
      <ons-tab page='tags.html' label='tags' icon='ion-ios-pricetag'></ons-tab>
      <ons-tab page='settings.html' label='settings' icon='ion-ios-cog'></ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id='home.html'>
    <ons-toolbar>
      <span class='center'>Home</span>
    </ons-toolbar>
  </ons-template>
  <ons-template id='comment.html'>
    <ons-toolbar>
      <span class='center'>Comments</span>
    </ons-toolbar>
  </ons-template>
  <ons-template id='tags.html'>
    <ons-toolbar>
      <span class='center'>Tags</span>
    </ons-toolbar>
  </ons-template>
  <ons-template id='settings.html'>
    <ons-toolbar>
      <span class='center'>Settings</span>
    </ons-toolbar>
  </ons-template>
</body>

javascript

ons.bootstrap();  
ons.ready(function() {  
  // localstorage key
  var key = '_TAB_INDEX_';
  // cached index
  var index = localStorage.getItem(key);

  // goto cached index
  if (index) {
    tabbar.setActiveTab(+index);
  }

  // event
  tabbar.on('postchange', function() {
    // get active tab index
    var index = this.getActiveTabIndex();
    // cached index
    localStorage.setItem(key, index);
  });
});

Tips

ons-tabbar と ons-tab でタブバーを作ろう

ons-tabbar でタブバー全体を定義し, そのなかに ons-tab を配置することで各タブを定義することができます.

<ons-tabbar>  
  <ons-tab>A</ons-tab>
  <ons-tab>B</ons-tab>
  <ons-tab>C</ons-tab>
</ons-tabbar>

ons-tab の各属性

今回のサンプルでは下記の属性を使用しました.

page ... 紐付けるページ
label ... タブの下部に表示するラベル
icon ... タブに表示するアイコン

他にも様々な属性を指定できます. 詳しくは公式サイトへ.

ons-template でページを定義

各ページは, 外部ファイルとして定義することもできるのですが, インラインで完結したい場合は ons-template を使うと便利です.

<ons-template id='ページのファイル名'>  
  <h1>ページだよー</h1>
</ons-template>

これで定義した id を ons-tab の page 属性に指定することで, テンプレートとタブを紐付けることができます.

postchange イベントと localStorage でタブ位置を保存

js 側の解説です.

1. ons-tabbar に js からアクセス

タブバーには, ons-tabbar に指定した var 属性名を使って javascript からアクセスすることができます.

ons.bootstrap();  
ons.ready(function() {  
  var index = tabbar.getActiveTabIndex();
});

2. postchange イベントを登録

postchange はタブを切り替えた際に発火するイベントです. このイベント内で現在のタブインデックスを取得して localStorage に保存します.

  // localstorage key
  var key = '_TAB_INDEX_';
  // event
  tabbar.on('postchange', function() {
    // get active tab index
    var index = this.getActiveTabIndex();
    // cached index
    localStorage.setItem(key, index);
  });

3. localStorage の値を反映

最後に, ページに来た際に localStorage の値を見て, 存在すればそれを反映するようにします.

  // localstorage key
  var key = '_TAB_INDEX_';
  // cached index
  var index = localStorage.getItem(key);

  // goto cached index
  if (index) {
    tabbar.setActiveTab(+index);
  }

画面を更新しても前回のタブ位置を保持します. これで完成です!

Conclusion

簡単に使えて良いですね♪

Onsen UI でハイブリッドアプリを作ってるんですが, だいぶ慣れてきました.
引き続き Onsen UI の tips 発信していこうと思います!!

phi

phiary