タブバーをすべてのページのbottomに固定したい

MonacaとonsenUIを使って、勉強しつつハイブリッドアプリを制作しています。
タブバーをすべてのページのbottomに固定したいのですが、やり方がよくわかりません。

最初のテンプレートでonsenUI V2 JS Tabbarを使っているので、index.htmlに記述している以下
の４ページ（tab1.html～tab4.html）に関してはbottomに固定されているのですが、

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

<ons-template id="tabMain.html"> <ons-page> <ons-toolbar> <div class="center" id="toolbar-title"></div> </ons-toolbar> <ons-tabbar position="bottom"> <ons-tab label="検索" icon="fa-search" page="tab1.html"> </ons-tab> <ons-tab label="マイページ" icon="fa-user" page="tab2.html"> </ons-tab> <ons-tab label="メッセージ" icon="fa-envelope-o" page="tab3.html"> </ons-tab> <ons-tab label="その他" icon="fa-ellipsis-h" page="tab4.html"> </ons-tab> </ons-tabbar>

これらの４ページから<ons-page></ons-page>で派生させているページに、

<ons-tabbar position="bottom"> <ons-tab label="検索" icon="fa-search" page="tab1.html"> </ons-tab> <ons-tab label="マイページ" icon="fa-user" page="tab2.html"> </ons-tab> <ons-tab label="メッセージ" icon="fa-envelope-o" page="tab3.html"> </ons-tab> <ons-tab label="その他" icon="fa-ellipsis-h" page="tab4.html"> </ons-tab> </ons-tabbar>

上記のコードを記述してもタブバーがbottomに固定されません。
（position="bottom"としても固定されず、スクロールすると動いてしまいます）。

また、派生させているページのタブバーから各ページに行くとJavascriptが効いていないという現象も生じてしまいます。

どなたか原因がわかる方がいらっしゃれば教えていただければ幸いです。

よろしくお願いいたします。

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

回答2件

ベストアンサー

こういうことがやりたいのではないでしょうか。参考にして下さい。
OnsenUI V2 JS 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="navigator1.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  tab1-2
68  <ons-button onclick="navigator1.popPage()">pop</ons-button>
69  </ons-page>
70</ons-template>
71
72<ons-template id="navigator2.html"> 
73<ons-navigator id="navigator2" page="tab2-1.html">
74</ons-template>
75
76<ons-template id="tab2-1.html">
77  <ons-page>
78  tab2-1
79  <ons-button onclick="navigator2.pushPage('tab2-2.html')">push</ons-button>
80  </ons-page>
81</ons-template>
82
83<ons-template id="tab2-2.html">
84  <ons-page>
85  tab2-2
86  <ons-button onclick="navigator2.popPage()">pop</ons-button>
87  </ons-page>
88</ons-template>
89
90<ons-template id="navigator3.html"> 
91<ons-navigator id="navigator3" page="tab3-1.html">
92</ons-template>
93
94<ons-template id="tab3-1.html">
95  <ons-page>
96  tab3-1
97  <ons-button onclick="navigator3.pushPage('tab3-2.html')">push</ons-button>
98  </ons-page>
99</ons-template>
100
101<ons-template id="tab3-2.html">
102  <ons-page>
103  tab3-2
104  <ons-button onclick="navigator3.popPage()">pop</ons-button>
105  </ons-page>
106</ons-template>
107
108<ons-template id="navigator4.html"> 
109<ons-navigator id="navigator4" page="tab4-1.html">
110</ons-template>
111
112<ons-template id="tab4-1.html">
113  <ons-page>
114  tab4-1
115  <ons-button onclick="navigator4.pushPage('tab4-2.html')">push</ons-button>
116  </ons-page>
117</ons-template>
118
119<ons-template id="tab4-2.html">
120  <ons-page>
121  tab4-2
122  <ons-button onclick="navigator4.popPage()">pop</ons-button>
123  </ons-page>
124</ons-template>
125
126</body>
127</html>
128

投稿2017/05/08 11:36

akabee

総合スコア1947

kozy

2017/05/08 18:01

おっしゃる通りです！まさに上記にいただいたコードのようなことがやりたかったのですが、このコードを参考にして自分のに当てはめてみたところ、タブバーが遷移したページの下部にも固定され、見事に意図した動作になりました！ ons-templateはなかなか設計の仕方が難しいですね。すごく勉強になりました。ありがとうございます！

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

こちらの内容は、全く逆の事象を解決したものです。
ご提示のようなことがやりたい場合、ons-tab内のページで個別にons-navigatorを呼び出し（tab1.html～tab4.htmlの４つ分のons-navigatorを定義）、それぞれのページで画面遷移するようにすれば良いかと思います。

現状、tabMain.htmlがons-navigatorのトップページで、そこから別のページにons-navigatorで遷移させていることで、トップページごと画面が切り替わってしまっています。
そうではなく、tabMain.htmlは画面の初期表示として表示させておいて、ons-tabのページとして別途用意したons-navigatorを呼び出し、そのトップページをtab1.htmlにしておけば良いです。
そのコード例はリンク先に存在していると思います。

投稿2017/05/08 04:03

akabee

総合スコア1947

kozy

2017/05/08 10:57

いろいろとやってみたのですが、ちょっとons-navigator関係がこんがらがってきました???? 私の理解力不足で「ons-tabのページとして別途用意したons-navigatorを呼び出し、」のところが少し分かりづらく…。教えていただいた点、ヒントにはなっておりますので、もう少し整理してやってみようと思います。どうしてもわからなかったらまた質問させてください。宜しくお願いいたします。