# Train Catalog App

This sample app is a train catalog which displaying the types trains towards Tokaido and Tohoku areas.

## Demo

[**Import Train Catalog App to your Monaca Account**](https://monaca.mobi/ja/directimport?pid=640814c8e78885661368f94f)

**Tested Environment**

* Android 11.0
* iOS 14.3

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mfas8C1fJ8NH_Ka5W2_%2F-Mfaty3ty2rs_vQfL2L1%2Fimage.png?alt=media\&token=822e5287-9cb4-4170-88b5-5ebd3387a03d)

## File Components

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mfas8C1fJ8NH_Ka5W2_%2F-Mfau0ZIOK9A7ergAiix%2Fimage.png?alt=media\&token=ae1da570-1bfc-4d5a-b626-988e004d929e)

| File            | Description                             |
| --------------- | --------------------------------------- |
| `index.html`    | The startup page                        |
| `css/style.css` | The stylesheet file for the application |
| `images/*.jpg`  | Image files used in this application    |

## Required JS/CSS Components

* `jQuery Mobile`   

## HTML Explanation

This sample uses the native function of Monaca. Therefore, there are multiple HTML pages. First, here is the body of the `index.html`.

```markup
<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>
```

This sample uses jQuery Mobile to display the list screen. Once you tap each column, `showDetail` function is called. This function will transit to the next page, which will be described later. Also `a` tag uses `monaca.invokeBrowser` function in `onclick` attributes. This function is used to launch the browser and display the specified URL.

## JavaScript Explanation

The JavaScript code of the Top Screen is not long.

```javascript
function showDetail(filename, trainname) {
  monaca.pushPage("detail.html", {}, {filename : filename, trainname : trainname})
}
```

As mentioned before, `showDetail` is called when the column in the list is tapped. Take 2 arguments and assign them to`filename` variable and `trqinname` variable.

Display the next page with `monaca.pushPage` function. This function will open a new page natively by using Monaca native functions and the variable passed to the next page is defined in its third argument. The passed value can be obtained by `monaca.queryParams` variable.