【Onsen UI】ページナビゲーション
どうしてもOnsen UIのページナビゲーションを使ってみたかったので、ディスコグラフィページに用いてみます。
ページナビゲーションとは
Onsen UIでは、<ons-navigator>コンポーネントでページナビゲーションを実装します。ons-navigatorは画面要素を持たない、ナビゲーションコントローラーです。そのため、一般的にはページ内にツールバーを表示するために<ons-toolbar>を組み合わせます。ナビゲーターは画面遷移をする際に自動的にアニメーションを適用し、親子関係を持つページを作成するために利用できます。
要は 親子関係を持つページ の管理をすることができます。
親子関係を持つリンクが貼れる と捉えても良いと思います。
親子関係はスタックで表現されます。
ons-navigatorは画面要素を持たない云々の話は、管理する機能しか持っていないので、実際にリンクを貼るボタンや、ボタンを配置するツールバーは別に用意してね！ということです。
では、実際に触りながら勉強していきましょう。
ディスコグラフィページの雛形を用意する
例によって Onsen CSS Components のPatternsタブから雛形をパクり拝借します。
ディスコグラフィページの仕様は
- 次の情報がリストで表示できること
- アルバム名
- アートワーク
- 発売日
- 値段
- アルバムを選択すると詳細ページに飛ぶこと
- アルバム詳細ページからディスコグラフィページに戻れること
といった感じでしょうか。
List with Pictureパターンが良さそうですね。
コピーして適当に整形します。
こんな感じになりました。
discography.html
<!doctype html> <html> <head> <link rel="stylesheet" href="bower_components/onsenui/build/css/onsenui.css"> <link rel="stylesheet" href="styles/onsen-css-components.min.css"> <link rel="stylesheet" href="styles/discography.css"> <script src="bower_components/onsenui/build/js/angular/angular.js"></script> <script src="bower_components/onsenui/build/js/onsenui.js"></script> <script> ons.bootstrap(); </script> </head> <body> <ons-page> <ons-toolbar> <div class="center">Discography</div> </ons-toolbar> <ons-list> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="img/yuk.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> 2st Album「fuga」 </div> <div class="desc"> <i class="ion ion-calendar"></i> 2015/01/01 </div> <div class="desc"> <i class="ion ion-cash"></i> 300 yen </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="img/yuk.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> 1st Album「hoge」 </div> <div class="desc"> <i class="ion ion-calendar"></i> 2014/11/03 </div> <div class="desc"> <i class="ion ion-cash"></i> 300 yen </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </body> </html>
discography.css
.list-item-container { line-height: 1; padding: 15px 0px 15px 15px; } .thumbnail { width: 80px; height: 80px; border-radius: 4px; -webkit-border-radius: 4px; } .name { font-weight: 500; line-height: 16px; font-size: 15px; margin-bottom: 6px; } .desc { font-size: 14px; margin-bottom: 6px; }
スクリーンショット
もうちょっとかっこよくなる予定だったんですが、センスが足りなかったみたいです。。。
スライディングメニューを追加する
まず、前回（Onsen UIでスマホサイトを作る その2）作ったスライディングメニューを追加します。
<ons-toolbar> <div class="center">Discography</div> </ons-toolbar>
を
<ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="ons.slidingMenu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Discography</div> </ons-toolbar>
に書き換えます。
こうなる
ページナビゲーションを使う（親ページ）
いよいよページナビゲーションを使います。
まずは親ページから。
使い方を確認すべく、公式を見ると
<ons-navigator>の概要
<ons-navigator>コンポーネントは、ページスタックの管理機能と、画面遷移時のアニメーション効果を提供します。ページスタックに新しいページが追加されると、自動的にアニメーションが行われ、ページが表示されます。スタック内のすべてのページは<ons-page>要素で表されます。そのため、<ons-navigator>コンポーネントの直下には<ons-page>コンポーネントのみ配置できます。
とあります。
<ons-navigator var="myNavigator">
と
</ons-navigator>
で挟んだ <ons-page> がページナビゲーションによって管理されるわけですね。
ページ遷移を行うためには、リンクを貼りたい要素に次のような属性を追加します。
onclick="myNavigator.pushPage('[リンク先ファイル名]', { animation : 'slide' } )"
discography.html
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles/discography.css"> </head> <body> <ons-navigator var="myNavigator"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="ons.slidingMenu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Discography</div> </ons-toolbar> <ons-list> <ons-list-item modifier="chevron" class="list-item-container" onclick="myNavigator.pushPage('album/fuga.html', { animation : 'slide' } )"> <ons-row> <ons-col width="95px"> <img src="img/yuk.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> 2st Album「fuga」 </div> <div class="desc"> <i class="ion ion-calendar"></i> 2015/01/01 </div> <div class="desc"> <i class="ion ion-cash"></i> 300 yen </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> <ons-list-item modifier="chevron" class="list-item-container" onclick="myNavigator.pushPage('album/hoge.html', { animation : 'slide' } )"> <ons-row> <ons-col width="95px"> <img src="img/yuk.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> 1st Album「hoge」 </div> <div class="desc"> <i class="ion ion-calendar"></i> 2014/11/03 </div> <div class="desc"> <i class="ion ion-cash"></i> 300 yen </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </ons-navigator> </body> </html>
※トップページからスライディングメニューで遷移してくることを前提とし、CSS, JSファイルの読み込みを減らしました。
ページナビゲーションを使う（親ページ）
今回、子ページからは親ページへ戻るだけなので実装は簡単です。
戻るリンクを貼りたい要素に次の属性を追加します。
onclick="myNavigator.popPage();"
スライディングメニューを戻るボタンに置き換えてみました。
fuga.html
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="myNavigator.popPage();"> <ons-icon icon="ion-arrow-left-c" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">fuga</div> </ons-toolbar> </ons-page> </body> </html>
動作確認
さて、動作確認です。
ディスコグラフィページ
ディスコグラフィページのリストからアルバムを選択すると。。。
アルバム詳細ページ
無事、アルバム詳細ページに遷移しました！！！
戻るボタンを押すと。。。
ディスコグラフィページ
おおお！！！
無事戻ってきました！！！
D O N E ！！！
