🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1539閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2019/07/07 03:38

編集2019/07/07 03:39

前提・実現したいこと

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>

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問