Ubuntu14.04にCordovaの開発環境を構築してFirefoxOSとAndroidアプリを作ってみる

画面を追加 編

今回はいくつか画面を追加し、画面が切り替わるようにする。

1. 最初の画面を整える

まず、Hello World の最初の画面をオープニング画面として整える。

タイトルを「Apache Cordova」から「Opening」 に変える。
www/index.html

<h1>Apache Cordova</h1>
↓
<h1>Opening</h1>

画面下部に「Start」ボタンを付ける。
www/index.html

<link rel="stylesheet" type="text/css" href="shared/style/buttons.css" />

<br />
<div class="bb-docs skin-organic">
    <button>Start</button>
</div>

<div class="app">〜</div> の部分を <section id="opening" の中に入れる。
www/index.html

</section> <!-- これを移動 -->

    <script type="text/javascript" src="cordova.js"></script>

ソースのコメント: @@@1

2. 画面を追加する

設定画面を追加する。
www/index.html

<section id="settings" role="region" class="current" data-position="current">
    <header>
        <menu type="toolbar">
            <button>done</button>
        </menu>
        <h1>Settings</h1>
    </header>
    <div class="app">
        <h1>Settings</h1>
    </div>
</section>

ソースのコメント: @@@2

メイン画面を追加する。
www/index.html

<section id="main" role="region" class="current" data-position="current">
    <header>
        <h1>Main</h1>
    </header>
    <div class="app">
        <h1>Main</h1>
    </div>
</section>

ソースのコメント: @@@3

画面が重なっている。
これは、JavaScript で必要ない画面を非表示にする処理が必要。

が、今回はここまで。
ソースはこちら