Onsen UI で ons-splitter と ons-navigator を併用したい

前提・実現したいこと

Onsen UI の ons-splitter と ons-navigator を併用したコントロールを行いたいです。

＜画面構成イメージ＞
Page A ─┐
Page B ─┼─ Detail
Page C ─┘

Page A〜C は ons-splitter-side のメニューから遷移し、
Page A〜C と Deail は、 ons-navigator での遷移をしたいと思っています。

開発環境

Monaca, Onsen UI, JavaScript

発生している問題・エラーメッセージ

以下のようなソースにしてみたところ、
ons-splitter は動作しましたが ons-navigator が動作しませんでした。

該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19
20    // Page init event
21    document.addEventListener('init', function(event) {
22      var page = event.target;
23
24      if (page.matches('.first-page')) {
25        page.querySelector('#push-button').onclick = function() {
26          document.querySelector('#navigator').pushPage('detail.html');
27        };
28
29      } else if (page.matches('#second-page')) {
30        page.querySelector('#pop-button').onclick = function() {
31          document.querySelector('#navigator').popPage();
32        };
33
34      }
35    });
36
37    window.fn = {};
38    window.fn.open = function() {
39      var menu = document.getElementById('menu');
40      menu.open();
41    };
42    window.fn.load = function(page) {
43      var content = document.getElementById('content');
44      var menu = document.getElementById('menu');
45      content
46        .load(page)
47        .then(menu.close.bind(menu));
48    };
49
50
51    if (ons.platform.isIPhoneX()) {
52      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
53      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
54    }
55  </script>
56</head>
57<body>
58  <ons-splitter>
59    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
60      <ons-page>
61        <ons-list>
62          <ons-list-item onclick="fn.load('pageA.html')" tappable>
63            Page A
64          </ons-list-item>
65          <ons-list-item onclick="fn.load('pageB.html')" tappable>
66            Page B
67          </ons-list-item>
68          <ons-list-item onclick="fn.load('pageC.html')" tappable>
69            Page C
70          </ons-list-item>
71        </ons-list>
72      </ons-page>
73    </ons-splitter-side>
74    <ons-splitter-content id="content" page="pageA.html">
75      <ons-navigator id="navigator" page="pageA.html"></ons-navigator>
76    </ons-splitter-content>
77  </ons-splitter>
78
79  <ons-template id="pageA.html">
80    <ons-page class="first-page">
81      <ons-toolbar>
82        <div class="left">
83          <ons-toolbar-button onclick="fn.open()">
84            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
85          </ons-toolbar-button>
86        </div>
87        <div class="center">
88          Page A
89        </div>
90      </ons-toolbar>
91      <div class="content" style="text-align: center">
92        <p>This is the page A.</p>
93        <ons-button id="push-button">Push page</ons-button>
94      </div>
95    </ons-page>
96  </ons-template>
97
98  <ons-template id="pageB.html">
99    <ons-page class="first-page">
100      <ons-toolbar>
101        <div class="left">
102          <ons-toolbar-button onclick="fn.open()">
103            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
104          </ons-toolbar-button>
105        </div>
106        <div class="center">
107          Page B
108        </div>
109      </ons-toolbar>
110      <div class="content" style="text-align: center">
111        <p>This is the page B.</p>
112        <ons-button id="push-button">Push page</ons-button>
113      </div>
114    </ons-page>
115  </ons-template>
116
117  <ons-template id="pageC.html">
118    <ons-page class="first-page">
119      <ons-toolbar>
120        <div class="left">
121          <ons-toolbar-button onclick="fn.open()">
122            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
123          </ons-toolbar-button>
124        </div>
125        <div class="center">
126          Page C
127        </div>
128      </ons-toolbar>
129      <div class="content" style="text-align: center">
130        <p>This is the page C.</p>
131        <ons-button id="push-button">Push page</ons-button>
132      </div>
133    </ons-page>
134  </ons-template>
135
136  <ons-template id="detail.html">
137    <ons-page id="second-page">
138      <ons-toolbar>
139        <div class="left"><ons-back-button>back</ons-back-button></div>
140        <div class="center">detail</div>
141      </ons-toolbar>
142
143      <div class="content" style="text-align: center">
144        <p>This is the detail page.</p>
145        <ons-button id="pop-button">Pop page</ons-button>
146      </div>
147    </ons-page>
148  </ons-template>
149</body>
150</html>

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Chrome DevToolsを使用して、どのようなHTMLが生成されているか確認すれば原因がわかります。
ons-splitter-contentの属性pageにpageA.htmlを設定しているため、ons-navigatorが消えてしまいます。

HTML
1<ons-splitter-content id="content" page="pageA.html" style="left: 0px;">
2  <ons-page class="first-page page" shown="">
3    <ons-toolbar class="toolbar">
4      <div class="left toolbar__left">
5        <ons-toolbar-button onclick="fn.open()" class="toolbar-button">
6          <ons-icon icon="ion-navicon, material:md-menu" class="ons-icon ion-navicon ons-icon--ion"></ons-icon>
7        </ons-toolbar-button>
8      </div>
9      <div class="center toolbar__center toolbar__title">
10        Page A
11      </div>
12      <div class="right toolbar__right"></div>
13    </ons-toolbar>
14    <div class="page__background"></div>
15    <div class="content page__content" style="text-align: center">
16      <p>This is the page A.</p>
17      <ons-button id="push-button" class="button">Push page</ons-button>
18    </div>
19  </ons-page>
20</ons-splitter-content>

属性pageを未設定にすることで、ページ遷移が可能となります。

HTML
1<ons-splitter-content id="content">
2  <ons-navigator id="navigator" page="pageA.html"></ons-navigator>
3</ons-splitter-content>

投稿2019/12/08 10:22

otak-lab

総合スコア276

退会済みユーザー

2019/12/11 11:35

具体的なご回答をくださりありがとうございます！おかげさまで解決しました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Onsen UI で ons-splitter と ons-navigator を併用したい

前提・実現したいこと

開発環境

発生している問題・エラーメッセージ

該当のソースコード

関連した質問