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

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

ただいまの
回答率

88.77%

ons-tabbarを使うとタブが大量発生する

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,035

muteki

score 12

 前提・実現したいこと

HTMLでページの遷移が可能なウェブページを作っています。
またOnsenUIを用いてons-navigatorで遷移した後のページにons-tabbarでタブをつけたいと考えています。

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

ons-navigatorで遷移はできたのですが、タブが大量発生してしまいます。

 該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Document</title>
</head>

<body>


    <ons-navigator swipeable id="myNavigator" page="index.html"></ons-navigator>

    <template id="index.html">
        <ons-page id="index">
            <p>This is the first page.</p>
            <ons-button id="push-button">Push page</ons-button>
        </ons-page>
    </template>


    <template id="tab1.html">
        <ons-page id="tab1">

            <ons-toolbar>
                <div class="left"><ons-back-button>Page 1</ons-back-button></div>
                <div class="center">page 2</div>
            </ons-toolbar> 

            <p>This is the second page.</p>
            <ons-tabbar swipeable position="bottom">
                <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="1" active>
                </ons-tab>
                <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
                </ons-tab>
            </ons-tabbar>
        </ons-page>
    </template>


    <template id="tab2.html">
        <ons-page id="Tab2">
            <ons-toolbar>
                <div class="center">page 3</div>
            </ons-toolbar> 
            <p>This is the third page.</p>
        </ons-page>
    </template> 
</body>

<script>
    document.addEventListener('prechange', function(event) {
        document.querySelector('ons-toolbar .center')
        .innerHTML = event.tabItem.getAttribute('label');
    });


    document.addEventListener('init', function(event) {
        var page = event.target;

    if (page.id === 'index') {
      page.querySelector('#push-button').onclick = function() {
        document.querySelector('#myNavigator').pushPage('tab1.html', {data: {title: 'tab1'}});
      };
    } else if (page.id === 'tab1') {
      page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
    }
  });

</script>
<script>
    document.addEventListener('prechange', function(event) {
    document.querySelector('ons-toolbar .center')
        .innerHTML = event.tabItem.getAttribute('label');
    });
</script>
</html>

 試したこと

tab1.htmlの本文とtabberの部分を分けて書いた場合index.htmlに飛べなくなりました。

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

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

タブ表示用のページがないからですね
(navigaterで移動後のページでtab1.htmlを指定してますが、tab1.html内でタブの内容として自身を呼び出してるのでtab1.htmlを永遠に表示させようとしてしまいます。

navigater移動後のページを一つ作ってそこでタブページを作るのがいいです。
サンプルとしてはこんな感じ

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Document</title>
</head>

<body>
    <ons-navigator swipeable id="myNavigator" page="index.html"></ons-navigator>
    <template id="index.html">
        <ons-page id="index">
            <p>This is the first page.</p>
            <ons-button id="push-button">Push page</ons-button>
        </ons-page>
    </template>

    <!-- タブ表示用ページ -->
    <template id="nav.html">
        <ons-page id="nav">
            <ons-toolbar>
              <div class="center">Tab 1</div>
            </ons-toolbar>

            <ons-tabbar swipeable position="auto">
              <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
              </ons-tab>
              <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
              </ons-tab>
            </ons-tabbar>
        </ons-page>
    </template>

    <!-- タブ1クリック時のページ -->
    <template id="tab1.html">
        <ons-page id="tab1">
            <p style="text-align: center;">
              This is the first page.
            </p>
            <div class="ons-toolbar-center"></div>
        </ons-page>
    </template>

    <!-- タブ2クリック時のページ -->
    <template id="tab2.html">
        <ons-page id="Tab2">
            <p>This is the third page.</p>
            <div class="ons-toolbar-center"></div>
        </ons-page>
    </template> 
</body>

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

        if (page.id === 'index') {
            page.querySelector('#push-button').onclick = function() {
                document.querySelector('#myNavigator').pushPage('nav.html');
            };
        }
        else if (page.id === 'tab1') {
            page.querySelector('.ons-toolbar-center').innerHTML = 'title';
        }
   });
    document.addEventListener('prechange', function(event) {
        document.querySelector('ons-toolbar .center')
        .innerHTML = event.tabItem.getAttribute('label');
    });
</script>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/27 03:53

    回答ありがとうございました!コードも説明もわかりやすく本当に助かりました!!

    キャンセル

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

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

関連した質問

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