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

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

詳細はこちら
Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

5568閲覧

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

kozy

総合スコア20

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2017/05/06 20:22

編集2017/05/06 20:31

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

最初のテンプレートでonsenUI V2 JS Tabbarを使っているので、index.htmlに記述している以下
の4ページ(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>

これらの4ページから<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が効いていないという現象も生じてしまいます。

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

こういうことがやりたいのではないでしょうか。参考にして下さい。
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はなかなか設計の仕方が難しいですね。すごく勉強になりました。 ありがとうございます!
guest

0

こちらの内容は、全く逆の事象を解決したものです。
ご提示のようなことがやりたい場合、ons-tab内のページで個別にons-navigatorを呼び出し(tab1.html~tab4.htmlの4つ分の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を呼び出し、」のところが 少し分かりづらく…。 教えていただいた点、ヒントにはなっておりますので、もう少し整理してやってみようと思います。 どうしてもわからなかったらまた質問させてください。 宜しくお願いいたします。
akabee

2017/05/08 11:36

もう一つ回答欄を使わせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問