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

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

ただいまの
回答率

88.91%

monacaのtabber遷移について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 191

3250547

score 0

前提・実現したいこと

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

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

エラーメッセージ

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <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'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

<!--処理-->
  <script>
    document.addEventListener('init', function(event) {
      var page = event.target;

      //ホームページの処理
      if (page.matches('#home-page')) {
        //スケジュールボタン押下
        page.querySelector('#schedule-button').onclick = function() {
          //htmlを表示
          document.querySelector('#navigator').pushPage('schedule.html');
        };
        //目標管理押下
        page.querySelector('#goal-button').onclick = function(){
          document.querySelector('#navigator').pushPage('goal.html');
        };
        //ボディチェック押下
        page.querySelector('#weight-button').onclick = function(){
          document.querySelector('#navigator').pushPage('weight.html');
        };
        //アルバム押下
        page.querySelector('#album-button').onclick = function(){
          document.querySelector('#navigator').pushPage('album.html');
        };
        //カロリータンパク質押下
        page.querySelector('#nutrition-button').onclick = function(){
          document.querySelector('#navigator').pushPage('nutrition.html');
        };
        //プロフィール押下
        page.querySelector('#profile-button').onclick = function(){
          document.querySelector('#navigator').pushPage('profile.html');
        };

      //スケジュールページの処理
      } else if (page.matches('#schedule-page')) {
        //ホームボタン押下
        page.querySelector('#home-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      //目標ページの処理
      }else if(page.matches('#goal-page')){
         page.querySelector('#home-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      //ボディチェックページの処理
      }else if(page.matches('#weight-page')){
         page.querySelector('#home-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      //アルバムページの処理
      }else if(page.matches('#album-page')){
         page.querySelector('#home-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      //カロリータンパク質ページの処理
      }else if(page.matches('#nutrition-page')){
         page.querySelector('#home-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      //プロフィールページの処理
      }else if(page.matches('#profile-page')){
         page.querySelector('#home-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };
      }
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>


<!--中身-->
<body>
  <ons-navigator id="navigator" page="common.html"></ons-navigator>


  <!-- 共通画面 -->
  <ons-template id="common.html">
    <ons-page id="common-page">
      <ons-tabbar>
        <ons-tab page="home.html" icon="md-home"></ons-tab>
        <ons-tab page="schedule.html" icon="fa-calendar"></ons-tab>
      </ons-tabbar>
    </ons-page>
  </ons-template>

  <!--ホーム画面-->
  <ons-template id="home.html">
    <ons-page id="home-page">
      <ons-toolbar>
        <div class="center">ホーム</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <p>
          <ons-button id="schedule-button">スケジュール</ons-button>
          <ons-button id="goal-button">目標管理</ons-button>
        </p>
        <p>
          <ons-button id="weight-button">ボディ<br>チェック</ons-button>
          <ons-button id="album-button">アルバム</ons-button>
        </p>
        <p>
          <ons-button id="nutrition-button">カロリー<br>タンパク質</ons-button>
          <ons-button id="profile-button">プロフィール</ons-button>
        </p>
      </div>

    </ons-page>
  </ons-template>

  <!--スケジュール画面-->
  <ons-template id="schedule.html">
    <ons-page id="schedule-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>home</ons-back-button></div>
        <div class="center">スケジュール</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <ons-button id="home-button">ホーム</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <!---目標画面-->
  <ons-template id="goal.html">
    <ons-page id="goal-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>home</ons-back-button></div>
        <div class="center">目標</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <ons-button id="home-button">ホーム</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <!---ボディチェック画面-->
  <ons-template id="weight.html">
    <ons-page id="weight-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>home</ons-back-button></div>
        <div class="center">ボディチェック</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <ons-button id="home-button">ホーム</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <!---アルバム画面-->
  <ons-template id="album.html">
    <ons-page id="album-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>home</ons-back-button></div>
        <div class="center">アルバム</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <ons-button id="home-button">ホーム</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <!---カロリータンパク質画面-->
  <ons-template id="nutrition.html">
    <ons-page id="nutrition-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>home</ons-back-button></div>
        <div class="center">カロリータンパク質</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <ons-button id="home-button">ホーム</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <!---プロフィール画面-->
  <ons-template id="profile.html">
    <ons-page id="profile-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>home</ons-back-button></div>
        <div class="center">プロフィール</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <ons-button id="home-button">ホーム</ons-button>
      </div>
    </ons-page>
  </ons-template>
</body>
</html>

試したこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 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が消えてしまうので、注意が必要です。

      //スケジュールページの処理
      } else if (page.matches('#schedule-page')) {
        if (document.querySelector('#navigator').topPage.id == "common-page") {
          // ons-tab→スケジュール
          page.querySelector("ons-back-button").disconnectedCallback();
          page.querySelector("ons-back-button").onclick = function () {
            document.querySelector("ons-tab[page='home.html']").click();
          };
          page.querySelector('#home-button').onclick = function () {
            document.querySelector("ons-tab[page='home.html']").click();
          };
        } else {
          // ons-navigator→スケジュール
          page.querySelector('#home-button').onclick = function() {
            document.querySelector('#navigator').popPage();
          };
        }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る