Q&A
OnsenUIは様々なJSフレームワークと連携できます。なのでどのフレームワークを使っているか(AngularJSなど)を記載頂けると良いと思います。
こんにちは。
Monacaのアプリ製作プラットフォームを使っています。
使用しているJSフレームワークは、OnsenUI V2 JS Minimumです。
OnsenUIで複数ページを設定して、飛ぶ先のページに × のようにページを消して戻る仕組みを作っています。具体的には、index.html→page1.html→index.htmlという風に母体のindex.htmlに戻れるようにしたいです。
実際に以下のコードをpage1.htmlに組み込みましたが、ボタンも現れませんでした。参考にしたサイトはこちら です。サイト内では、ボタンのデザインを外部ウェブサイト掲載の物を使用していたようでしたので、個人的に用意した画像を代わりに試してみましたが、そちらも反映されませんでした。
原因は他にあるのでしょうか？Onsenに関してまだ知識も浅く、学習過程にあるので、今回の問題やそれ以外の内容でもご指摘やアドバイスをお待ちしております。
よろしくお願いします。
html
1<ons-page> 2<ons-toolbar> 3 <div class="left"> 4 <ons-toolbar-button> 5 <ons-icon icon="ion-close-round" fixed-width="false" style="font-size: 60px; vertical-align: -4px"></ons-icon> 6 </ons-toolbar-button> 7 </div> 8</ons-toolbar> 9</ons-page>
baseballyamaさん ご指摘ありがとうございます。使用しているJSフレームワークは、Onsen UI V2 Javascript Minimumです。
提示いただいているコードだけではなんともいえません。初期化などはエラーなく済ませられていますか？エラーは表示されていませんか？エラーを確認する方法はご存知でしょうか？
akabeeさん ご指摘ありがとうございます。エラーは表示されませんでしたが、既存のHTMLページの上に追加のOnsenページが現れてしまっています。
失礼しました。先ほどのこちらからの返事は、回答をくださった方のご指摘を参考にした結果のことを申し上げています。
回答1件
0
こういうことでしょうか。
monacaの「Onsen UI V2 Navigation」というプロジェクトテンプレートをベースにpopPageのボタンを「×」アイコンに変えただけのものです。
pushPage ←→ popPage で行ったり来たりしています。
<ons-toolbar-button>のボタンが表示されなかったのはよくわかりませんが、テキスト等ボタン以外の要素は表示されていますでしょうか。
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: gap: https://ssl.gstatic.com; 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> 16 // Page init event 17 document.addEventListener('init', function(event) { 18 var page = event.target; 19 20 if (page.matches('#first-page')) { 21 22 page.querySelector('#push-button').onclick = function() { 23 document.querySelector('#navigator').pushPage('page2.html'); 24 }; 25 26 } else if (page.matches('#second-page')) { 27 28 page.querySelector('#pop-button').onclick = function() { 29 document.querySelector('#navigator').popPage(); 30 }; 31 32 } 33 }); 34 </script> 35</head> 36<body> 37 <ons-navigator id="navigator" page="page1.html"></ons-navigator> 38 39 <ons-template id="page1.html"> 40 <ons-page id="first-page"> 41 <ons-toolbar> 42 <div class="center">Page 1</div> 43 </ons-toolbar> 44 45 <div class="content" style="text-align: center"> 46 <p>This is the first page.</p> 47 <ons-button id="push-button">Push page</ons-button> 48 </div> 49 </ons-page> 50 </ons-template> 51 52 <ons-template id="page2.html"> 53 <ons-page id="second-page"> 54 <ons-toolbar> 55 <div class="center">Page 2</div> 56 <div class="left"><ons-toolbar-button id="pop-button"><ons-icon icon="ion-close-round" fixed-width="false" style="font-size: 60px; vertical-align: -4px"></ons-icon></ons-toolbar-button></div> 57 </ons-toolbar> 58 59 <div class="content" style="text-align: center"> 60 <p>This is the second page.</p> 61 </div> 62 </ons-page> 63 </ons-template> 64</body> 65</html> 66
投稿2017/09/27 08:37
総合スコア67
t0kura-5さん
ご回答ありがとうございます。ご掲載いただいたコードを真っ新なプロジェクトに載せた場合は、クローズボタンも出現し、複数ページ間の行き来もできました。しかし、既存のコードとの兼ね合いによるものなのか、現在進行中のプロジェクトに組み込むとOnsenがうまく機能しません。既存のHTMLページの上に追加のOnsenページが現れてしまいます。
既存のHTMLページやJSの設定に問題があるのかもしれません。
それと「既存のHTMLページの上に追加のOnsenページが現れてしまいます。」というのは、具体的にどのようなイメージでしょうか。
t0kura-5さん
はい、私もそのように考えています。
Onsenのページを作るべくコードを入力してデバッガーで確認したところ、それまでは普通に反映されていたHTMLコードの仕組みもすべて画面上から消えてしまい、ただOnsenのページのみがある状態でしたので、既存のページの上にOnsenのページがあるのではないかというイメージです。具体性に欠けていましたね・・。
あなたの回答
tips
プレビュー
