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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Onsen UI

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

Monaca

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

Q&A

解決済

1回答

3134閲覧

Onsen UI のpushpage遷移先のページでCSSの書き換えができない。

t0kura-5

総合スコア67

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2016/11/10 10:01

###前提・実現したいこと
Onsen UI V2 でピンチイン/ピンチアウトによる画像の拡大/縮小する機能を作成中です。
pushpageで遷移した先で、画像の拡大/縮小を行いたいのですがうまく動作しません。
遷移前のページでは拡大/縮小が動作しています。
動作するのであればAngularJSでも構いません。
解決方法がわかる方がおりましたらアドバイスください。

###発生している問題・エラーメッセージ

pushpageで遷移した先で、画像の拡大/縮小を行うためにCSSの書き換えを行っているが、反映されません。 <ons-gesture-detector>によるジェスチャーの検知は出来ています。 pushpage前のページであれば、問題なく拡大/縮小が出来ています。

###該当のソースコード

javascript

1var target = $("img.photo-zoom_jq"); 2var prevScale = 1; 3var scale = 1; 4 5$(document).on('transform', 'img.photo-zoom_jq', function(event) { 6 console.log('transform is detected.'); 7 scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); 8 target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); 9}); 10$(document).on('release', 'img.photo-zoom_jq', function(event) { 11 console.log('release is detected.'); 12 prevScale = scale; 13}); 14$(document).on('touchmove', 'img.photo-zoom_jq', function(event) { 15 console.log('touchmove is detected.'); 16 event.preventDefault(); 17}); 18

HTML

1<ons-navigator var="navi" page="page.html"> 2 </ons-navigator> 3 4 <ons-template id="page.html"> 5 <ons-page> 6 <ons-toolbar> 7 <div class="left"> 8 <ons-back-button>Back</ons-back-button> 9 </div> 10 <div class="center">Navigation</div> 11 </ons-toolbar> 12 13 <section style="padding: 10px"> 14 <ons-button ng-click="navi.pushPage('page2.html')"> 15 Push Page 16 </ons-button> 17 <ons-gesture-detector> 18 ↓push前(検知:OK|動作:OK)<br> 19 <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240"> 20 </ons-gesture-detector> 21 22 </section> 23 </ons-page> 24 </ons-template> 25 26 <ons-template id="page2.html"> 27 <ons-page> 28 <ons-toolbar> 29 <div class="left"> 30 <ons-back-button>Back</ons-back-button> 31 </div> 32 <div class="center">Navigation</div> 33 </ons-toolbar> 34 35 <section style="padding: 10px"> 36 <ons-button ng-click="navi.popPage()"> 37 Pop Page<br> 38 </ons-button> 39 <ons-gesture-detector> 40 ↓push後(検知:OK|動作:NG)<br> 41 <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240"> 42 </ons-gesture-detector> 43 44 </section> 45 </ons-page> 46 </ons-template>

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

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

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

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

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

guest

回答1

0

ベストアンサー

angularjsのcontrollerを使うともっときれいになると思いますが
現状を修正する場合こんな感じでしょうか。

サンプルリンク

html

1<html> 2<head> 3 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 5 <script src="onsenui.min.js"></script> 6 <script src="angular-onsenui.min.js"></script> 7 <link rel="stylesheet" href="onsenui.css"/> 8 <link rel="stylesheet" href="onsen-css-components.css"/> 9 <link rel="stylesheet" href="my.css"/> 10 11 <script> 12 var app = ons.bootstrap('app', []); 13 document.addEventListener('init', function(event) { 14 if(event.target.id !== 'page2') return; 15 16 var target = $("#page2 img.photo-zoom_jq"); 17 console.log(target); 18 var prevScale = 1; 19 var scale = 1; 20 $(document).on('transform', '#page2 img.photo-zoom_jq', function(event) { 21 console.log('transform is detected.'); 22 scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); 23 target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); 24 }); 25 $(document).on('release', '#page2 img.photo-zoom_jq', function(event) { 26 console.log('release is detected.'); 27 scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); 28 console.log('scale:' + scale); 29 target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); 30 console.log('css end.'); 31 }); 32 $(document).on('touchmove', '#page2 img.photo-zoom_jq', function(event) { 33 event.preventDefault(); 34 }); 35 }); 36 document.addEventListener('destroy', function(event) { 37 $(document).off('transform release touchmove'); 38 }); 39 </script> 40</head> 41 42<body> 43<ons-navigator var="navi" page="page.html"></ons-navigator> 44 45<ons-template id="page.html"> 46 <ons-page id="page1"> 47 <ons-toolbar> 48 <div class="left"> 49 <ons-back-button>Back</ons-back-button> 50 </div> 51 <div class="center">Navigation</div> 52 </ons-toolbar> 53 <section style="padding: 10px"> 54 <ons-button ng-click="navi.pushPage('page2.html')"> 55 Push Page 56 </ons-button> 57 <ons-gesture-detector> 58 ↓push前(検知:OK|動作:OK)<br> 59 <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240"> 60 </ons-gesture-detector> 61 </section> 62 </ons-page> 63</ons-template> 64 65<ons-template id="page2.html"> 66 <ons-page id="page2"> 67 <ons-toolbar> 68 <div class="left"> 69 <ons-back-button>Back</ons-back-button> 70 </div> 71 <div class="center">Navigation</div> 72 </ons-toolbar> 73 <section style="padding: 10px"> 74 <ons-button ng-click="navi.popPage()"> 75 Pop Page<br> 76 </ons-button> 77 <ons-gesture-detector> 78 ↓push後(検知:OK|動作:NG)<br> 79 <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240"> 80 </ons-gesture-detector> 81 </section> 82 </ons-page> 83</ons-template> 84</body> 85</html>

投稿2016/11/10 11:29

編集2016/11/10 14:53
pinpikokun

総合スコア376

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

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

t0kura-5

2016/11/10 13:32

レビューありがとうございます。 このJS部分は、monacaの教則本のサンプルアプリから借用しています。 「event.preventDefault();」は、touchイベント全体でスクロールを無効にするためのようです。 作成いただいたページをPC、モバイルで試しましたが、おっしゃるとおり動きませんでした。 ソースに大きな違いは無いのですが、質問の本質とは違う問題のようなので、PC上で再現できるように<script></script>部分を以下のように変更しました。 <script> var app = ons.bootstrap('app', []); ons.ready(function() { var target = $("img.photo-zoom_jq"); var prevScale = 1; var scale = 1; $(document).on('transform', 'img.photo-zoom_jq', function(event) { console.log('transform is detected.'); scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); }); $(document).on('release', 'img.photo-zoom_jq', function(event) { console.log('release is detected.'); scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); console.log('scale:' + scale); target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); console.log('css end.'); }); $(document).on('touchmove', 'img.photo-zoom_jq', function(event) { event.preventDefault(); }); }); </script> ons.ready(function() {~})を追加したのと、PCで取得できる「release」イベントで画像の位置を動かすようにしました。(iPhoneのsafariでは動きませんでしたのでPCのchromeで試してください。) 再現方法ですが、ページを開いて最初に出た「page.html」では何もせずに、「Push Page」ボタンを押します。 表示された「page2.html」の画像の上でクリックすると「release」イベントが発生し、CSSの書き換えが行われます。「Pop Page」ボタンを押して「page.html」に戻ると画像の位置が変わっているのがわかります。 このとき、「page.html」のCSSのみ書き換えられ、「page2.html」のCSSが書き換わりません。 「page2.html」のCSSを書き換えたい、というのがやりたいことになります。 「page.html」の画像は、CSSが書き換わっているのを確認するために入れているだけですので、本来はなくてよいものです。「page2.html」の画像をクリックして、「page2.html」の画像の位置が動けばOKです。 話がややこしくなり申し訳ございません。 よろしくお願いします。
pinpikokun

2016/11/10 14:20

var target = $("img.photo-zoom_jq"); の時点でtargetが1ページ目の画像しか取得していないので2ページ目の画像が更新されません。 例えばonsen-uiのinitイベントを使用してページが読み込まれたタイミングで var target = $("img.photo-zoom_jq");以降の処理をしてみてはいかがでしょうか initのリンク https://ja.onsen.io/v2/docs/guide/js/
pinpikokun

2016/11/10 14:56

回答も更新しておきました
t0kura-5

2016/11/10 15:03

ありがとうございます。 解決しました。 Onsen UIの仕組みへの理解が少し深まりました。 助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問