カテゴリー
コンピューター

【Monaca】【Onsen UI】ナビゲーション型のページのひとつに、スライディングメニューを組み込むコード

ビゲーション型のページのひとつに、スライディングメニューを組み込むアプリのページ遷移イメージ
ビゲーション型のページのひとつに、スライディングメニューを組み込むアプリのページ遷移イメージ

アプリ内容

次の内容のアプリですわ。スライディングメニューとページ移動のみの、機能は一切無いアプリとなりますの。

  • ページ一覧
    • メインページ
    • ページ1
    • ページ2
  • メインページ ←→ ページ1←→ ページ2  →メインページ …、と移動する。
  • メインページのみ、スライディングメニューを持つ。

テンプレートとコード

  • Onsen UI最小限のテンプレート

Onsen UI Sliding Menu テンプレートでも良かったかもしれませんけれども、メインはナビゲーションということで、最小限のテンプレートを選びました。

ファイル構成は次のようにいたしました。

  • index.html に全てのコードを記述する。
  • page1.html、page2.html は削除する。

そして、コードは次のようになりました。書いていてポイントと感じたことなどをメモしておきます♪

  • OnsenUI を読み込むのみで、他の JavaScript は一切不要
  • ons-navigator 内で移動するページの中に、ons-sliding-menu を組み込む
  • ons-sliding-menu のページは、メニューページとメインページを乗せるだけの土台とする。
  • ons-sliding-menu のメインページは、ナビゲーションの管理下に置くことができる。
  • スライディングメニューページヘ移動する時は、ons-sliding-menu のメインページではなく、土台となるページを移動先へ指定すること。

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
    </script>
</head>
<body>
    <!-- アプリ全体をナビゲーションでページ管理を行う -->
    <ons-navigator var="navi" page="start.html">
    </ons-navigator> 
    
    <!-- スライディングメニューをもったページ -->
    <!-- 左に位置するメニューページと右に位置するメインページを乗せるページ -->
    <ons-template id="start.html">
        <ons-page>
            <ons-sliding-menu var="slidingMenu"
                              menu-page="menu.html"
                              main-page="main.html">
            </ons-sliding-menu>
        </ons-page>
    </ons-template>
    
    <!-- 左に位置するメニューページ -->
    <ons-template id="menu.html">
        <ons-page>
            <h1>スライディングメニュー</h1>
        </ons-page>
    </ons-template>
    
    <!-- 右に位置するメインページ -->
    <!-- スライディングメニューを構成するが、ナビゲーションの管理下でもある -->
    <ons-template id="main.html">
        <ons-page>
            <ons-toolbar>
                <div class="center">メインページ</div>
            </ons-toolbar>

            <div style="text-align: center">
                <br>
                <ons-button onclick="navi.pushPage('page1.html')">
                    Push Page 1
                </ons-button>
            </div>
        </ons-page>
    </ons-template>

    <!-- ナビゲーション管理下のページ -->
    <ons-template id="page1.html">
        <ons-page>
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center">ページ 1</div>
            </ons-toolbar>
        
            <div style="text-align: center">
                <br>
                <ons-button onclick="navi.popPage()">
                  Pop Page
                </ons-button>
                <br>
                <br>

                <ons-button onclick="navi.pushPage('page2.html')">
                    Push Page 2
                </ons-button>
            </div>
        </ons-page>
    </ons-template>

    <!-- ナビゲーション管理下のページ -->
    <ons-template id="page2.html">
        <ons-page>
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center">ページ 2</div>
            </ons-toolbar>

            <div style="text-align: center">
                <br>
                <ons-button onclick="navi.popPage()">
                  Pop Page
                </ons-button>
                <br>
                <br>

<!-- main.html への移動ではスライディングメニューが使用できなくなる。 -->
                <!-- start.html へ移動すること -->
                <ons-button onclick="navi.resetToPage('start.html')">
                  Reset To Page start.html
                </ons-button>
            </div>
        </ons-page>
    </ons-template>
</body>
</html>

おわりに

次の書籍が大変参考になりました♪なにより、ナビゲーションでページ管理するアプリにスライディングメニューを取り入れる方法が、簡単ではありますけれども明記されておりました。

できる！ということがわかったことが、諦める選択肢を削ることができましたのでとても有用でしたの♪

また、次の公式ページも各パーツの仕様が確認でき、役に立ちました♪

以上です。

コメントを残す