ons-navigatorでのページ遷移

###前提・実現したいこと
ons-navigatorでページを切り替えた後、ons-tabbarのons-tab要素を非表示にし、ons-toolbarにons-back-buttonを追加するコードを組みたいのですが、jQuery,angularJSは初心者なもので意図したように動作しません。御指南お願いします。
欲を言えば、タブの非表示、ons-back-buttonの追加はpage2.html内だけに留めておきたいです。

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

エラーメッセージ

###該当のソースコード
index.html

<body> <ons-navigator id="AniNavi"> <ons-page> <ons-toolbar> AniTimer</ons-toolbar> <ons-tabbar> <ons-tab page="home.html"> </ons-tab> <ons-tab page="page1.html"> </ons-tab> <ons-tab page="setteing.html"> </ons-tab> </ons-tabbar> </ons-page> </ons-navigator>

page1.html

            </ons-list-item>
            <div style="text-align: center">
                <ons-list-item tappable onclick="sAniNavi.pushPage('reference/page2.html')">
                
                </ons-list-item>
            </div>
            
            <ons-list-header></ons-list-header>
            <ons-list-item class="summerLiFont">
                
            </ons-list-item>
            <div type="text-align: center">
                <ons-list-item tappable onclick="sAniNavi.pushPage('reference/page2.html')">
                    
                </ons-list-item>
            </div>
            
            <ons-list-header class="etcLiFont">
                
            </ons-list-header>
            <div type="text-align: center">
                <ons-list-item tappable onclick="sAniNavi.pushPage('reference/page2.html')">
                    
                </ons-list-item>
            </div>
        </ons-list>
    </ons-page>
</ons-navigator>

</body>

page2.html
<ons-page>
...
</ons-page>

###試したこと
右も左も分かりません????

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

akabee

2017/05/31 12:06

ページを切り替えた後に何か操作をしたいのであれば、該当の操作はreference/aniList.htmlとreference/sAniList.htmlで試行錯誤されているということで良いでしょうか？

Gecko

2017/05/31 22:46

index.htmlの記載忘れでした。こちらの不手際でご迷惑をおかけし、申し訳ないです(._.)

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

回答2件

ベストアンサー

ひとまず、以下コードの一つ目のタブが想定されている動作になるかと思います。
OnsenUI V2 Angular1 Minimumテンプレート適用→index.htmlに以下コード全コピーで動作しますので試してみて下さい。

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">
6<meta http-equiv="Content-Security-Policy" content="default-src * data:; 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>
16ons.ready(function() {
17console.log("Onsen UI is ready!");
18});
19
20document.addEventListener('show', function(event) {
21var page = event.target;
22var titleElement = document.querySelector('#toolbar-title');
23
24if (page.matches('#first-page')) {
25titleElement.innerHTML = 'My app - Page 1';
26} else if (page.matches('#second-page')) {
27titleElement.innerHTML = 'My app - Page 2';
28}
29});
30</script>
31</head>
32<body>
33
34<ons-navigator id="mainNavigator" page="tabMain.html">
35
36<ons-template id="tabMain.html"> 
37<ons-page> 
38<ons-toolbar> 
39<div class="center" id="toolbar-title"></div> 
40</ons-toolbar> 
41<ons-tabbar position="bottom"> 
42<ons-tab active label="検索" icon="fa-search" page="navigator1.html"> 
43</ons-tab> 
44<ons-tab label="マイページ" icon="fa-user" page="navigator2.html"> 
45</ons-tab> 
46<ons-tab label="メッセージ" icon="fa-envelope-o" page="navigator3.html"> 
47</ons-tab> 
48<ons-tab label="その他" icon="fa-ellipsis-h" page="navigator4.html"> 
49</ons-tab> 
50</ons-tabbar>
51</ons-page>
52</ons-template>
53
54<ons-template id="navigator1.html"> 
55<ons-navigator id="navigator1" page="tab1-1.html">
56</ons-template>
57
58<ons-template id="tab1-1.html">
59  <ons-page>
60  tab1-1
61  <ons-button onclick="mainNavigator.pushPage('tab1-2.html')">push</ons-button>
62  </ons-page>
63</ons-template>
64
65<ons-template id="tab1-2.html">
66  <ons-page>
67  <ons-toolbar> 
68    <ons-back-button></ons-back-button>
69    <div class="center" id="toolbar-title"></div> 
70  </ons-toolbar> 
71  tab1-2
72  <ons-button onclick="mainNavigator.popPage()">pop</ons-button>
73  </ons-page>
74</ons-template>
75
76<ons-template id="navigator2.html"> 
77<ons-navigator id="navigator2" page="tab2-1.html">
78</ons-template>
79
80<ons-template id="tab2-1.html">
81  <ons-page>
82  tab2-1
83  <ons-button onclick="navigator2.pushPage('tab2-2.html')">push</ons-button>
84  </ons-page>
85</ons-template>
86
87<ons-template id="tab2-2.html">
88  <ons-page>
89  tab2-2
90  <ons-button onclick="navigator2.popPage()">pop</ons-button>
91  </ons-page>
92</ons-template>
93
94<ons-template id="navigator3.html"> 
95<ons-navigator id="navigator3" page="tab3-1.html">
96</ons-template>
97
98<ons-template id="tab3-1.html">
99  <ons-page>
100  tab3-1
101  <ons-button onclick="navigator3.pushPage('tab3-2.html')">push</ons-button>
102  </ons-page>
103</ons-template>
104
105<ons-template id="tab3-2.html">
106  <ons-page>
107  tab3-2
108  <ons-button onclick="navigator3.popPage()">pop</ons-button>
109  </ons-page>
110</ons-template>
111
112<ons-template id="navigator4.html"> 
113<ons-navigator id="navigator4" page="tab4-1.html">
114</ons-template>
115
116<ons-template id="tab4-1.html">
117  <ons-page>
118  tab4-1
119  <ons-button onclick="navigator4.pushPage('tab4-2.html')">push</ons-button>
120  </ons-page>
121</ons-template>
122
123<ons-template id="tab4-2.html">
124  <ons-page>
125  tab4-2
126  <ons-button onclick="navigator4.popPage()">pop</ons-button>
127  </ons-page>
128</ons-template>
129
130</body>
131</html>

コードを見ていただくと分かると思いますが、そういうことがやりたい場合はタブ外側のons-navigatorとタブ内側のons-navigatorを明確に使い分ける必要があります。
Mori-Yukitoさんのコードであれば外側がAniNavi、内側がsAniNaviになります。

このあたりの画面構成を自由自在に設定するために、ons-tabとons-navigatorについて正確な理解が必要です。

onsenUIのリファレンスのほか、こちらやこちらが参考になると思いますので読んでみてください。

投稿2017/05/31 23:42

akabee

総合スコア1947

文章から推測するしか無いですが、

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsenui.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsen-css-components.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/js/onsenui.js"></script>
<!--
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
-->
</head>

<body>
<ons-template id="tab1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Tab 1</div>
    </ons-toolbar>

    <p style="text-align: center;">
      This is the first page.
    </p>
  </ons-page>
</ons-template>

<ons-template id="tab2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Tab 2</div>
    </ons-toolbar>

    <p style="text-align: center;">
      This is the second page.
    </p>
  </ons-page>
</ons-template>

<ons-template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Tab 0</div>
    </ons-toolbar>

    <ons-list>
      <ons-list-item tappable onclick="AppNavi.pushPage('page2.html')">Tap me</ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</ons-template>

<ons-navigator id="AppNavi" page="tab.html">
</ons-navigator>

<ons-template id="tab.html">
<ons-tabbar>
  <ons-tab label="Tab 0" page="page1.html" active>
  </ons-tab>
  <ons-tab label="Tab 1" page="tab1.html">
  </ons-tab>
  <ons-tab label="Tab 2" page="tab2.html">
  </ons-tab>
</ons-tabbar>
</ons-template>

</body>
<script>
ons.ready(function() {
});
</script>
</html>

こういう挙動でいいのかしら。

投稿2017/05/31 16:35

rururu3

総合スコア5545

Gecko

2017/05/31 22:50

index.htmlの記載忘れでした。こちらの不手際でご迷惑をおかけし、申し訳ないです(._.)

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

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

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

ons-navigatorでのページ遷移

関連した質問