Onsen UI ナビ付 タブバー

Onsen UI タブバーナビゲーター を使用したテンプレートです。

テスト環境 : Android 4.2.2、iOS 7.1.1

ファイル構成

../../../_images/tabbar_1.png
index.html

スタート画面のページ ( ホーム画面のページ )

navigator.html

ページ 1 のナビゲーターページ

page1.html

ページ 1

page2.html

ページ 2

page3.html

ページ 3

new_page.html

新規のページ

styles/app.css

プロジェクトのスタイルシート ファイル

HTML の解説

index.html

index.html は、スタート/ホーム画面のページです。ここでは、 <ons-tabbar> コンポーネントを使用して、3 つのタブを指定します。タブは、Home ( navigator1.html )、Camera ( page2.html )、Settings ( page3.html ) です ( 下のスクリーンショット参照のこと )。

../../../_images/tabbar_6.png

page1.html

page1.html は、1 列の文字列 ( Page 1 ) と 1 個のボタン ( Push New Page ) から構成されています。下のスクリーンショットをご確認ください。

../../../_images/tabbar_2.png

Push New Page ボタンをクリックすると、新規のページ ( New Page ) が表示され、ページスタックへプッシュ ( push ) されます。つまり、ページスタック内で、2 番目のページとして、ページ 1 の後ろに置かれることを意味します。

new_page.html

new_page.html は、1 列の文字列 ( New Page ) と 1 個のボタン ( Pop Page ) から構成されています。下のスクリーンショットをご確認ください。

../../../_images/tabbar_5.png

新規のページ ( New Page ) のトップ左端の Home 戻るボタンまたは Pop Page ボタンをタップすると、ページスタックに置かれている前のページに戻ります。ここでは、ページ 1 となります。

page2.html

page2.html は、1 列の文字列 ( Page 2 ) で構成されています。下のスクリーンショットをご確認ください。

../../../_images/tabbar_3.png

page3.html

page3.html は、1 列の文字列 ( Page 3 ) から構成されています。下のスクリーンショットをご確認ください。

../../../_images/tabbar_4.png