電車図鑑アプリ
最終更新
最終更新
このサンプルアプリは、東海道から東北区間で運行されている車両を表示する電車図鑑です。
テスト環境
Android 11.0
iOS 14.3
ファイル | 説明 |
| スタート画面のページ |
| アプリのスタイルシート |
| アプリで使用する画像ファイル |
jQuery Mobile
このサンプルでは、Monaca のネイティブ関数を使用するので、複数の HTML ページを用意しています。 index.html
ファイル内の記述 ( HTML の <body> 内 ) は、次のとおりです。
このサンプルでは、jQuery Mobile を使用して、一覧画面を表示します。一覧画面の各行をタップすると、 showDetail
関数を呼び出します。この関数で、ページの遷移を行います。また、 a
タグの onclick
属性内で、 monaca.invokeBrowser
関数を使用しています。この関数は、ブラウザーを起動させ、指定した URL を表示します。
トップ画面の JavaScript を解説します。
showDetail
関数は、一覧の行をタップすると呼び出されます。2 つの引数を取り、画像ファイル名 ( filename
変数 ) と列車名 ( trainname
変数 ) の変数にそれぞれ代入されます。
monaca.pushPage
関数を使用して、次のページを表示します。この関数では、Monaca のネイティブ関数を使用した、ページの表示処理と次ページへ渡す変数 ( 第三引数 ) の定義をしています。次ページへ渡す値は、 monaca.queryParams
変数を使用して取得します。