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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Onsen UI

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

Q&A

解決済

2回答

5602閲覧

ons-navigatorの中でons-tabbarを使いたいが・・・

退会済みユーザー

退会済みユーザー

総合スコア0

Onsen UI

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

0グッド

0クリップ

投稿2017/02/13 01:59

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ
onsenUI v2 の初心者です。 monacaにてOnsenUI V2 Tabbarを使用しコンテンツを作成中です。

「Onsen UI V2 JS tabbar」テンプレートを使って、プロジェクトを作成後、以下に修正します。「Page4へ」ボタンを押しても遷移しない。原因はどこでしょうか?

エラーメッセージ

エラーメッセージなし、 現象として、遷移しないだけ
###該当のソースコード

ここにご自身が実行したソースコードを書いてください

index.html

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); </script> </head> <body> <ons-navigator var="myNavigator" page="tab.html"> </ons-navigator> </body> </html>

tab.html

<!-- タブバーの表示 --> <ons-tabbar> <ons-tab page="page1.html" label="Page 1" icon="fa-align-justify" active="true"></ons-tab> <ons-tab page="page2.html" label="Page 2" icon="fa-align-justify"></ons-tab> <ons-tab page="page3.html" label="Page 3" icon="fa-align-justify"></ons-tab> </ons-tabbar>

page1.html

<ons-page> <ons-toolbar> <div class="center header_title">Page1</div> </ons-toolbar>
<h1 style="text-align:center;">Page1</h1> <br> <div style="text-align:center;"> <ons-button onClick="myNavigator.pushPage('page4.html')">Page4へ</ons-button> <br> Page4へ遷移するとタブが消えます。 </div>
</ons-page>

page2.html

<ons-page> <ons-toolbar> <div class="center header_title">Page2</div> </ons-toolbar>
<h1 style="text-align:center;">Page2</h1>
</ons-page>

page3.html

<ons-page> <ons-toolbar> <div class="center header_title">Page3</div> </ons-toolbar>
<h1 style="text-align:center;">Page3</h1>
</ons-page>

page4.html

<ons-page> <ons-toolbar> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center header_title">Page4</div> </ons-toolbar>
<h1 style="text-align:center;">Page4</h1>
</ons-page> ###試したこと 課題に対してアプローチしたことを記載してください

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

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

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

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

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

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

guest

回答2

0

原因はどこでしょうか?

var 属性は angular-onsenui.js に含まれる機能のため、angular-onsenui.js を読み込まないと使用できません(つまり AngularJS 1 を使って Onsen UI アプリを開発する時にしか使えません)。今回のご質問の場合はそれが原因です。

投稿2017/03/21 10:55

編集2017/03/23 14:37
asial-matagawa

総合スコア164

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

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

0

ベストアンサー

ドキュメントに載っている書き方なら動きました。

html

1// index.html 2<ons-navigator id="myNavigator" var="myNavigator" page="tab.html"></ons-navigator>

html

1// tab.html 変更なし 2<ons-tabbar> 3 <ons-tab page="page1.html" label="Page 1" icon="fa-align-justify" active="true"></ons-tab> 4 <ons-tab page="page2.html" label="Page 2" icon="fa-align-justify"></ons-tab> 5 <ons-tab page="page3.html" label="Page 3" icon="fa-align-justify"></ons-tab> 6</ons-tabbar>

html

1// page1.html 2<ons-page> 3 <ons-toolbar> 4 <div class="center header_title">Page1</div> 5 </ons-toolbar> 6 <ons-button onclick="document.querySelector('#myNavigator').pushPage('page4.html')">Page4へ</ons-button> 7</ons-page>

参考
ons-navigator
https://ja.onsen.io/v2/docs/js/ons-navigator.html

投稿2017/02/15 01:55

編集2017/02/15 01:59
hiroki0322

総合スコア65

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問