このサンプルアプリは、東海道から東北区間で運行されている車両を表示する電車図鑑です。
テスト環境
ファイル | 説明 |
---|---|
index.html |
スタート画面のページ |
css/style.css |
アプリのスタイルシート |
images/*.jpg |
アプリで使用する画像ファイル |
jQuerymobile
このサンプルでは、Monaca のネイティブ関数を使用するので、複数の HTML
ページを用意しています。 index.html
ファイル内の記述 ( HTML の
<body> 内 ) は、次のとおりです。
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Tokaido Shinkansen Trains</li>
<li><a href="#" onclick="showDetail('0kei', 'Series 0')">Series 0</a></li>
<li><a href="#" onclick="showDetail('300kei', 'Series 300')">Series 300</a></li>
<li><a href="#" onclick="showDetail('700kei', 'Series 700')">Series 700</a></li>
<li><a href="#" onclick="showDetail('n700kei', 'Series N700')">Series N700</a></li>
</ul>
<p id="attribution">Photos by <a href="#" onclick="monaca.invokeBrowser('http://www.flickr.com/photos/kimuchi583/')">kimuchi583</a></p>
</div>
このサンプルでは、jQuery Mobile
を使用して、一覧画面を表示します。一覧画面の各行をタップすると、
showDetail
関数を呼び出します。この関数で、ページの遷移を行います。また、 a
タグの onclick
属性内で、 monaca.invokeBrowser
関数を使用しています。この関数は、ブラウザーを起動させ、指定した URL
を表示します。
トップ画面の JavaScript を解説します。
function showDetail(filename, trainname) {
monaca.pushPage("detail.html", {}, {filename : filename, trainname : trainname})
}
showDetail
関数は、一覧の行をタップすると呼び出されます。2
つの引数を取り、画像ファイル名 ( filename
変数 ) と列車名 (
trainname
変数 ) の変数にそれぞれ代入されます。
monaca.pushPage
関数を使用して、次のページを表示します。この関数では、Monaca
のネイティブ関数を使用した、ページの表示処理と次ページへ渡す変数 (
第三引数 ) の定義をしています。次ページへ渡す値は、 monaca.queryParams
変数を使用して取得します。