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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

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

Q&A

1回答

911閲覧

monacaのtabber遷移について

3250547

総合スコア0

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

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

0グッド

0クリップ

投稿2020/07/01 13:58

編集2022/01/12 10:55

前提・実現したいこと

monacaで開発を行おうと思っているのですが
ボタンのスケジュール画面への遷移とタブバーによるスケジュール画面の遷移の両方を実装したいのですが、
タブバーでスケジュール画面へ遷移した際のスケジュール画面の戻るボタン、ホームへの遷移ボタンが機能しなくなります。
ホーム画面上で、スケジュール画面を表示しているだけだからなのでしょうか?
ホーム画面のスケジュールボタンを押した際はスケジュール画面の戻るボタン、ホームへの遷移ボタンが機能するのですが。
わかる方解説をおねがいします!

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

エラーメッセージ

該当のソースコード

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 <link rel="stylesheet" href="components/loader.css"> 10 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 12 <link rel="stylesheet" href="css/style.css"> 13 14<!--処理--> 15 <script> 16 document.addEventListener('init', function(event) { 17 var page = event.target; 18 19 //ホームページの処理 20 if (page.matches('#home-page')) { 21 //スケジュールボタン押下 22 page.querySelector('#schedule-button').onclick = function() { 23 //htmlを表示 24 document.querySelector('#navigator').pushPage('schedule.html'); 25 }; 26 //目標管理押下 27 page.querySelector('#goal-button').onclick = function(){ 28 document.querySelector('#navigator').pushPage('goal.html'); 29 }; 30 //ボディチェック押下 31 page.querySelector('#weight-button').onclick = function(){ 32 document.querySelector('#navigator').pushPage('weight.html'); 33 }; 34 //アルバム押下 35 page.querySelector('#album-button').onclick = function(){ 36 document.querySelector('#navigator').pushPage('album.html'); 37 }; 38 //カロリータンパク質押下 39 page.querySelector('#nutrition-button').onclick = function(){ 40 document.querySelector('#navigator').pushPage('nutrition.html'); 41 }; 42 //プロフィール押下 43 page.querySelector('#profile-button').onclick = function(){ 44 document.querySelector('#navigator').pushPage('profile.html'); 45 }; 46 47 //スケジュールページの処理 48 } else if (page.matches('#schedule-page')) { 49 //ホームボタン押下 50 page.querySelector('#home-button').onclick = function() { 51 document.querySelector('#navigator').popPage(); 52 }; 53 54 //目標ページの処理 55 }else if(page.matches('#goal-page')){ 56 page.querySelector('#home-button').onclick = function() { 57 document.querySelector('#navigator').popPage(); 58 }; 59 60 //ボディチェックページの処理 61 }else if(page.matches('#weight-page')){ 62 page.querySelector('#home-button').onclick = function() { 63 document.querySelector('#navigator').popPage(); 64 }; 65 66 //アルバムページの処理 67 }else if(page.matches('#album-page')){ 68 page.querySelector('#home-button').onclick = function() { 69 document.querySelector('#navigator').popPage(); 70 }; 71 72 //カロリータンパク質ページの処理 73 }else if(page.matches('#nutrition-page')){ 74 page.querySelector('#home-button').onclick = function() { 75 document.querySelector('#navigator').popPage(); 76 }; 77 78 //プロフィールページの処理 79 }else if(page.matches('#profile-page')){ 80 page.querySelector('#home-button').onclick = function() { 81 document.querySelector('#navigator').popPage(); 82 }; 83 } 84 }); 85 86 if (ons.platform.isIPhoneX()) { 87 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 88 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 89 } 90 </script> 91</head> 92 93 94<!--中身--> 95<body> 96 <ons-navigator id="navigator" page="common.html"></ons-navigator> 97 98 99 <!-- 共通画面 --> 100 <ons-template id="common.html"> 101 <ons-page id="common-page"> 102 <ons-tabbar> 103 <ons-tab page="home.html" icon="md-home"></ons-tab> 104 <ons-tab page="schedule.html" icon="fa-calendar"></ons-tab> 105 </ons-tabbar> 106 </ons-page> 107 </ons-template> 108 109 <!--ホーム画面--> 110 <ons-template id="home.html"> 111 <ons-page id="home-page"> 112 <ons-toolbar> 113 <div class="center">ホーム</div> 114 </ons-toolbar> 115 <div class="content" style="text-align: center"> 116 <p> 117 <ons-button id="schedule-button">スケジュール</ons-button> 118 <ons-button id="goal-button">目標管理</ons-button> 119 </p> 120 <p> 121 <ons-button id="weight-button">ボディ<br>チェック</ons-button> 122 <ons-button id="album-button">アルバム</ons-button> 123 </p> 124 <p> 125 <ons-button id="nutrition-button">カロリー<br>タンパク質</ons-button> 126 <ons-button id="profile-button">プロフィール</ons-button> 127 </p> 128 </div> 129 130 </ons-page> 131 </ons-template> 132 133 <!--スケジュール画面--> 134 <ons-template id="schedule.html"> 135 <ons-page id="schedule-page"> 136 <ons-toolbar> 137 <div class="left"><ons-back-button>home</ons-back-button></div> 138 <div class="center">スケジュール</div> 139 </ons-toolbar> 140 <div class="content" style="text-align: center"> 141 <ons-button id="home-button">ホーム</ons-button> 142 </div> 143 </ons-page> 144 </ons-template> 145 146 <!---目標画面--> 147 <ons-template id="goal.html"> 148 <ons-page id="goal-page"> 149 <ons-toolbar> 150 <div class="left"><ons-back-button>home</ons-back-button></div> 151 <div class="center">目標</div> 152 </ons-toolbar> 153 <div class="content" style="text-align: center"> 154 <ons-button id="home-button">ホーム</ons-button> 155 </div> 156 </ons-page> 157 </ons-template> 158 159 <!---ボディチェック画面--> 160 <ons-template id="weight.html"> 161 <ons-page id="weight-page"> 162 <ons-toolbar> 163 <div class="left"><ons-back-button>home</ons-back-button></div> 164 <div class="center">ボディチェック</div> 165 </ons-toolbar> 166 <div class="content" style="text-align: center"> 167 <ons-button id="home-button">ホーム</ons-button> 168 </div> 169 </ons-page> 170 </ons-template> 171 172 <!---アルバム画面--> 173 <ons-template id="album.html"> 174 <ons-page id="album-page"> 175 <ons-toolbar> 176 <div class="left"><ons-back-button>home</ons-back-button></div> 177 <div class="center">アルバム</div> 178 </ons-toolbar> 179 <div class="content" style="text-align: center"> 180 <ons-button id="home-button">ホーム</ons-button> 181 </div> 182 </ons-page> 183 </ons-template> 184 185 <!---カロリータンパク質画面--> 186 <ons-template id="nutrition.html"> 187 <ons-page id="nutrition-page"> 188 <ons-toolbar> 189 <div class="left"><ons-back-button>home</ons-back-button></div> 190 <div class="center">カロリータンパク質</div> 191 </ons-toolbar> 192 <div class="content" style="text-align: center"> 193 <ons-button id="home-button">ホーム</ons-button> 194 </div> 195 </ons-page> 196 </ons-template> 197 198 <!---プロフィール画面--> 199 <ons-template id="profile.html"> 200 <ons-page id="profile-page"> 201 <ons-toolbar> 202 <div class="left"><ons-back-button>home</ons-back-button></div> 203 <div class="center">プロフィール</div> 204 </ons-toolbar> 205 <div class="content" style="text-align: center"> 206 <ons-button id="home-button">ホーム</ons-button> 207 </div> 208 </ons-page> 209 </ons-template> 210</body> 211</html> 212

試したこと

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

guest

回答1

0

ons-navigatorでページ遷移を行った場合、popPage()ons-back-buttonによって前ページに戻ることができますが、ons-tabbarons-navigatorとは関係なくページの切り替えを行います。

スケジュール画面のinitイベントは、ons-tabpage属性やons-navigatorpushPage()の場合に発火するので、ons-tabpage属性の場合は、タブバーのホームをクリックすることで実現できます。

なお、ons-back-buttonons-navigatorのページ遷移で使うことが前提なので、ホームタブ→スケジュール→ons-back-button→スケジュールタブと操作すると、スケジュール画面のons-back-buttonが消えてしまうので、注意が必要です。

JavaScript

1 //スケジュールページの処理 2 } else if (page.matches('#schedule-page')) { 3 if (document.querySelector('#navigator').topPage.id == "common-page") { 4 // ons-tab→スケジュール 5 page.querySelector("ons-back-button").disconnectedCallback(); 6 page.querySelector("ons-back-button").onclick = function () { 7 document.querySelector("ons-tab[page='home.html']").click(); 8 }; 9 page.querySelector('#home-button').onclick = function () { 10 document.querySelector("ons-tab[page='home.html']").click(); 11 }; 12 } else { 13 // ons-navigator→スケジュール 14 page.querySelector('#home-button').onclick = function() { 15 document.querySelector('#navigator').popPage(); 16 }; 17 }

投稿2020/07/02 01:45

otak-lab

総合スコア276

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問