Monaca/Onsen ui ons-tabbarの配置＆pushPageで画面遷移

###前提・実現したいこと
Monaca、及びonsen uiを利用して、アプリ開発をしております。
アプリ内では2つのカテゴリーがあり、それぞれのカテゴリー別に機能を分けてます。
そのため、画面の下部にタブを設置し、カテゴリー毎に表示したいと考えております。
なお、それぞれのページから各機能にアクセス(画面遷移)する形となります。

###発生している問題・エラーメッセージ
元々一つのページから各機能の画面に遷移させていたのですが、今回タブを入れたことにより、画面遷移がうまくいかずに立ち往生しております。
具体的には、タブでの画面遷移はできるのですが、ページ内の画面遷移ボタンが効かない状況(要素をタップしてもpushPageが機能しない状態)です。
tabbarを削除すると機能するので、tabbarが問題と思われるのですが、どう修正すべきかよく分からない状況です。
修正方法をご教示頂ければ幸いです。

###該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <script src="components/loader.js"></script>
6  <link rel="stylesheet" href="components/loader.css">
7  <link rel="stylesheet" href="css/style.css">
8  <script src="js/demo.js"></script>
9</head>
10<body>
11  <ons-navigator page="page1.html" var="app.navi"></ons-navigator>
12
13  <ons-page>
14      <ons-tabbar var="tabbar">
15         <ons-tab page="page1.html" label="page1" icon="ion-home" active="true"></ons-tab>
16         <ons-tab page="page2.html" label="page2" icon="ion-briefcase"></ons-tab>
17         <ons-tab page="page3.html" label="page3" icon="ion-ios-cog"></ons-tab>
18      </ons-tabbar>
19  </ons-page>
20
21  <ons-template id="page1.html">
22    <ons-page page="page1">
23      <ons-toolbar>
24        <div class="center">Page1</div>
25      </ons-toolbar>
26
27      <ons-list>
28        <ons-list-item modifier="chevron" class="item" id="page1_1">
29          <ons-row>
30            <ons-col class="title">
31              <header>
32                <span class="item-title">Page1_1</span>
33              </header>
34            </ons-col>
35          </ons-row>                          
36        </ons-list-item>
37
38        <ons-list-item modifier="chevron" class="item" id="page1_2">
39          <ons-row>
40            <ons-col class="title">
41              <header>
42                <span class="item-title">Page1_2</span>
43              </header>
44            </ons-col>
45          </ons-row>                          
46        </ons-list-item>
47      </ons-list>
48    </ons-page>
49  </ons-template>
50
51  <ons-template id="page2.html">
52    <ons-page id="page2">
53      <ons-toolbar>
54        <div class="center">Page2</div>
55      </ons-toolbar>
56
57      <ons-list>
58        <ons-list-item modifier="chevron" class="item" id="page2_1">
59          <ons-row>
60            <ons-col class="title">
61              <header>
62                <span class="item-title">Page2_1</span>
63              </header>
64            </ons-col>
65          </ons-row>                          
66        </ons-list-item>
67      </ons-list>
68    </ons-page>
69  </ons-template>
70
71  <ons-template id="page3.html">
72    <ons-page id="page3">
73      <ons-toolbar>
74        <div class="center">Page3</div>
75      </ons-toolbar>
76
77      <ons-list>
78        <ons-list-item modifier="chevron" class="item" id="page3_1">
79          <ons-row>
80            <ons-col class="title">
81              <header>
82                <span class="item-title">Page3_1</span>
83              </header>
84            </ons-col>
85          </ons-row>                          
86        </ons-list-item>
87      </ons-list>
88    </ons-page>
89  </ons-template>
90
91  <ons-template id="page1_1.html">
92    <ons-page id="page1_1">
93      <ons-toolbar id="onstoolbar">
94        <div class="left"><ons-back-button>Back</ons-back-button></div>
95        <div class="center">Page1_1</div>
96      </ons-toolbar>
97      <ons-list>
98        <p>Page1_1です。</p>
99      </ons-list>
100    </ons-page>
101  </ons-template>
102
103  <ons-template id="page1_2.html">
104    <ons-page id="page1_2">
105      <ons-toolbar id="onstoolbar">
106        <div class="left"><ons-back-button>Back</ons-back-button></div>
107        <div class="center">Page1_2</div>
108      </ons-toolbar>
109      <ons-list>
110        <p>Page1_2です。</p>
111      </ons-list>
112    </ons-page>
113  </ons-template>
114
115  <ons-template id="page2_1.html">
116    <ons-page id="page2_1">
117      <ons-toolbar id="onstoolbar">
118        <div class="left"><ons-back-button>Back</ons-back-button></div>
119        <div class="center">Page2_1</div>
120      </ons-toolbar>
121      <ons-list>
122        <p>Page2_1です。</p>
123      </ons-list>
124    </ons-page>
125  </ons-template>
126
127  <ons-template id="page3_1.html">
128    <ons-page id="page3_1">
129      <ons-toolbar id="onstoolbar">
130        <div class="left"><ons-back-button>Back</ons-back-button></div>
131        <div class="center">Page3_1</div>
132      </ons-toolbar>
133      <ons-list>
134        <p>Page3_1です。</p>
135      </ons-list>
136    </ons-page>
137  </ons-template>
138</body>
139</html>

demo.js

javascript
1var app = ons.bootstrap();
2
3(function(){
4    $(document).on('pageinit', '#page1', function() {
5        $('#page1_1', this).on('click', function() {
6            app.navi.pushPage('page1_1.html');
7        });
8
9        $('#page1_2', this).on('click', function() {
10            app.navi.pushPage('page1_2.html');
11        });
12    });
13
14    $(document).on('pageinit', '#page2', function() {
15        $('#page2_1', this).on('click', function() {
16            app.navi.pushPage('page2_1.html');
17        });
18    });
19    
20    $(document).on('pageinit', '#page3', function() {
21        $('#page3_1', this).on('click', function() {
22            app.navi.pushPage('page3_1.html');
23        });
24    });
25
26})();

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

回答1件

ベストアンサー

タブバーが表示された状態で、タブが表示されたままその内部のページだけで画面遷移したいのに、画面遷移させるとタブバーの画面ごと画面遷移してしまって意図と異なる、ということで合っていますか？

こちらの回答が参考になると思います。
ons-navigatorをタブ内部のページごとに定義してください。

投稿2017/05/17 13:11

akabee

総合スコア1947

teratech

2017/05/18 02:37

ご回答頂きまして、ありがとうございます。タブでの画面遷移はできるのですが、ページ内の画面遷移ボタンが効かない状況(要素をタップしてもpushPageが機能していない状態)でございます。 tabbarを削除すると機能するので、tabbarが問題と思われるのですが、修正点分からずです。

akabee

2017/05/18 03:04

うまくいかないとはそういうことでしたか。私はJavaScriptCoreで開発を実施していないので詳細が分かりません。すみません。ただ、イベントの定義の方法がサンプルコードと違いますので、OnsenUIのイベント発火のタイミング等に沿ったイベント定義が出来ていないのではないかと予想します。個人的に確認してみようと思いますが、むしろ、tabbarを削除した際に機能するというコードをご提供いただけませんか？

teratech

2017/05/18 08:20

コードを修正致しました。こちらのコードにおいて、tabbarを含むons-pageをコメントアウトするとpushPageによる画面遷移は機能します。よろしくお願い致します。

akabee

2017/05/18 11:15

ons.bootstrapがあるということは、これはAngularJSのコードということでよかったでしょうか？その割に、HTMLにAngularJSの読み込みのためのコードが見当たりませんが。。というわけでAngularJSのプロジェクトにて初期化し試してみたのですが、初期読み込みでエラーになり画面遷移できませんでした。 Uncaught TypeError: $ is not a functionと表示されていますが、心当たりはございますか？

teratech

2017/05/19 00:56

ご連絡頂きまして、ありがとうございます。 ons.bootstrapはOnsen UIコンポーネントを呼び出すために必要と考えて組み込んでおり、AngularJSは使っておりませんが、そもそもこの時点でも誤ってますか・・？エラーに関しましては、jQueryを組み込んでいるので、akabee様で組み込まれていないためと思われます。 JS/CSSコンポーネントで以下のものを組み込んで頂ければ幸いです。・Onsen UI (Monaca Version) ・jQuery (Monaca Version) お手数おかけいたしますが、何卒よろしくお願い申し上げます。

akabee

2017/05/19 02:04 編集

JS/CSSコンポーネントが必要でしたか、失礼しました。後ほど確認します。まずは回答できる部分のみお返事しますが、ons.bootstrapはAngularJS+OnsenUIの記法ですね。リファレンスにも、JavaScriptCoreのonsのリファレンスにはbootstrapの記載はありません。→https://ja.onsen.io/v2/docs/js/ons.html# また、JavaScriptCoreでOnsenUIを用いる場合はonsenui.js とCSSファイルを読み込むだけでOnsenUIを使うことができるとガイドにあります。 →https://ja.onsen.io/v2/docs/guide/js/ ※ちなみにOnsenUI1の時代は、OnsenUIはAngularJSと一体化しており、AngularJSを使わないという選択肢はありませんでした。その時代の情報が色々と残っていますので、あたかも必須であるように記載されている情報を見て誤解された可能性はあります。現状使っておられると思われるバージョンはOnsenUI2で、これはAngularJSを用いなくても使えるようになったものだという経緯があります。

teratech

2017/05/19 04:22

詳細なご説明頂きまして、ありがとうございます。わかりやすい記事がネット上に色々あるので、リファレンスを読み込む姿勢が欠けてました・・今回の件も、リファレンス通りに書けていないことが原因かもしれませんね。もう少しいじってみて、無理であれば一から書き直してみます。

teratech

2017/05/22 07:23

akabee様 ons-navigatorのpage属性を、tabbarのみを記述したons-templateにすることで解決しました。色々とやりとり頂きまして、ありがとうございました。

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