Q&A
ソースコードは```～```内に入れてください。
###前提・実現したいこと
去年の段階で、MonacaでJavascriptとｈｔｍｌ5、ｃｓｓ3、を使ってアプリを作成し、今年3月からアップル・デヴェロッパー・プログラムとグーグル・プレイ・デヴェロパー・コンソール、を通じて、アプリを配信してましたが、onsen UIを無視した設計のため、jquery.mobile,onsen UIを取り入れた、構造に変えつつあります。jquery.mobileをインデックスページに搭載し、リンクから、Diary.htmlにとびそのページで、設定、JSプラグインの追加で、onsen UIコンポーネントを実装しました。最初は、ナビゲーションテンプレートからはいりましたが、パーツを削ってカスタマイズしていました。後付けのonsen UIは、バージョンアップされていて、Monacaの解説本には則さない仕様です。
Diary.htmlでスライダーを使うには、どうしたらいいでですか？
###発生している問題・エラーメッセージ
スライダーは機能するものの、ページリンク（ページ・ロード）イヴェントが開始できません。またアイコンをタップしても、メニューページが開きません。スライドのみ可能です。タップしても、ページリロードできません。
エラーメッセージ
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-width=1.0,user-scalable=no" /> <meta http-equiv="Content-Sequrity-Policy" content="default-src *; style-src- * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; " /> <script src="www/components/monaca-onsenui/js/onsenui.js"></script> <script src="www/components/monaca-onsenui/js/angular/angular.js"></script> <link rel="stylesheet" href="www/components/monaca-onsenui/css/onsenui.css" /> <link rel="stylesheet" href="www/components/monaca-onsenui/css/onsen-css-components.css /> <script> ons.ready(function(){ console.log('onsen ui ready'); }); //fn is set as function name on full action window.fn = {}; //men page open event is set window.fn.open = document.getElementById('menu'); menu.open(); //page load event is set window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content .load(page) .then(menu.close.bind(menu)); }; </script> </head> <body> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <div id="menu1"> <ons-list> <ons-list-item onclick="fn.load('home.html')" tappable> <ons-icon icon="gear" spin="true"></ons-icon>Home </ons-list-item> <ons-list-item onclick="fn.load('settings.html')" tappable> <ons-icon icon="gear" spin="true"></ons-icon>setting </ons-list-item> <ons-list-item onclick="fn.load('about.html')" tappable> <ons-icon icon="gear" spin="true"></ons-icon>about </ons-list-item> </ons-list> </div> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <ons-template id="home.html"> <ons-page> <ons-toolbar> <ons-toolbar-button onclick="fn.open()"> <div class="left"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </div> </ons-toolbar-button> <div class="center"> home </div> </ons-toolbar> <p style="color: #ff00ff; font-size: 20px; margin-top:20%; "> Main theme of letters </p> </ons-page> </ons-template> <ons-template id="setting.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </div> </ons-toolbar-button> <div class="center"> home </div> </ons-toolbar> <p>a letter</p> </ons-page> </ons-template> <ons-template id="about.html" <ons-page> <ons-toolbar> <div class="left"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </div> </ons-toolbar-button> <div class="center"> home </div> </ons-toolbar> <p>a letter</p> </ons-page> </ons-template> </body> </html>
###試したこと
リファレンスエラーチェック、スクリプトの実行可能か不能かのチェック（不能）。
<script> ons.bootstrap(); </script>の設置。
onsen UI リンクページとの答え合わせ。
<html> <head> <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'" /> </head> </html>
の開閉。
<script src="components/loader.js"></script>
<meta name="format-detection" content="telephone=no" /> ```のヌル値の確認と、ステータスチェンジ、アヤックス、ジェイソンファイルの実行状況の確認。→、ほぼ鉄壁のガードで、インラインすら打ち消すスクリプトの実行ファイルでした。また、アプリからのコールバックも確実にでき、アシアル社で管理されていること、そして、承認プログラムのみ連携可能な実態。 カスタムコンフィグファイルの、確認。 ###補足情報(言語/FW/ツール等のバージョンなど) とにかく、スクリプトを実行できるようにしたいです。長々書いてますけど、結論は、何にもできなくなっている。という難問を、スクリプトもｃｓｓも セルフSRCぐらいは動かせるようにしたいです。 また、追加で次を施しました。
ブラウザの開発ツールなどでエラーが出ていないか確認し、出ている場合は質問本文に追記してください。
ありがとうごあいます。ブラウザーにエラーはない状態で、コンパイルエラーもない状態で、ｃｓｓのみ稼働、スクリプト実行不能です。またURLも問題がなく、JSコンポーネンツの追加からonsenui を付与しています。
クロームの：のその他のツール〜デヴェロッパーツールを試しても、Monaca環境なので、開発プラットフォームごと読み込んでしまいます。
そういうことですね。「エラーはない状態」というのはMonacaのデバッガーでは確認できないってことですね？https://ja.monaca.io/debugger.html
そうです。エラーはないけど、スクリプトが動かない状態です。
一部jQueryのような記述が見受けられますが、jQueryライブラリ本体は読み込めていますか？（読まれてない場合も一応エラーは出ますけども・・）
jquery 読み込み必須ですか、onsen UI使用したいのですが、slide menu page 使用したいのです。jquery library導入して再試行してみます。何か、感染しているかもしれません。
そうですね。jQueryMobileを利用するのであればjQuery本体の設置は必須です。 http://www.buildinsider.net/web/jquerymobileref/01
回答1件
0
ベストアンサー
幾つか間違ってる部分がありますね。
例としては
//men page open event is set window.fn.open = document.getElementById('menu'); menu.open();
サンプルからコピペミスしてると思います。サンプルで記載されてるのは
window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); };
上記のとおりです(https://ja.onsen.io/v2/api/js/ons-splitter-content.html 参考)
とりあえず
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> <script> ons.ready(function(){ }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load(page) .then(menu.close.bind(menu)); }; </script> </head> <body> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item onclick="fn.load('home.html')" tappable> <ons-icon icon="gear" spin="true"></ons-icon>Home </ons-list-item> <ons-list-item onclick="fn.load('settings.html')" tappable> <ons-icon icon="gear" spin="true"></ons-icon>setting </ons-list-item> <ons-list-item onclick="fn.load('about.html')" tappable> <ons-icon icon="gear" spin="true"></ons-icon>about </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <ons-template id="home.html"> <ons-page> <ons-toolbar> <ons-toolbar-button onclick="fn.open()"> <div class="left"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </div> </ons-toolbar-button> <div class="center"> home </div> </ons-toolbar> <p style="color: #ff00ff; font-size: 20px; margin-top:20%; "> Main theme of letters </p> </ons-page> </ons-template> <ons-template id="settings.html"> <ons-page> <ons-toolbar> <ons-toolbar-button onclick="fn.open()"> <div class="left"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </div> </ons-toolbar-button> <div class="center"> settings </div> </ons-toolbar> <p>a letter</p> </ons-page> </ons-template> <ons-template id="about.html"> <ons-page> <ons-toolbar> <ons-toolbar-button onclick="fn.open()"> <div class="left"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </div> </ons-toolbar-button> <div class="center"> about </div> </ons-toolbar> <p>a letter</p> </ons-page> </ons-template> </body> </html>
これをtest.htmlにしてindex.htmlからtest.htmlにリンクで飛ばした際動きました。
投稿2017/07/14 12:02
総合スコア5545
あなたの回答
tips
プレビュー
