Home > webプログラム > javascript > jQTouch

06月09日 

jQTouch

jQTouch – 画面遷移の前にデータ処理

jQTouchネタが多いですね。案件で蓄積してるノウハウの小出しですｗ

あるボタンやリストをタップした時、画面が遷移する前にデータの取得やら処理を行いたい、という状況は多いかと思います。タップのイベントを拾って処理して、処理後に遷移すればOK。ということで

PLAIN TEXT
JAVASCRIPT:
  1. $('#hoge').tap(function() {
  2.     // 処理
  3.  
  4.     jQT.goTo('#next', 'slide');
  5. });

上のネタはどこかのブログでも記事にされていたのを見たことがあるのですが、実はこれだけだと連打や他のボタンをタップしてしまうと画面遷移でブッ飛びます…orz
LocalDBに保存してる分でも後処理によってはタイムラグも発生するし、Ajaxで外部のDBサーバーに問い合わせするとボチボチ時間が掛かったりして余裕で連続タップされてしまうわけで。

こんな時は単純にフラグ立てちゃえばいいですね。

PLAIN TEXT
JAVASCRIPT:
  1. $('#hoge').tap(function() {
  2.     if (!tapNow) {
  3.         tapNow = true;
  4.  
  5.         // 処理
  6.     }
  7. });

フラグを倒すタイミングはページの遷移が終了した時で良いので

PLAIN TEXT
JAVASCRIPT:
  1. $('body > div').bind('pageAnimationEnd', function(event, info) {
  2.     touchNow = false;
  3. });

で一括でフラグを倒すことが出来ます（エラー発生時などは個別に対応が必要ですが）

さらに、slideを繰り返すとgoBackでリストの.activeが解除されない（？）という謎なアレがあるので、ついでに

PLAIN TEXT
JAVASCRIPT:
  1. $('body> div').bind('pageAnimationEnd', function(event, info) {
  2.     touchNow = false;
  3.  
  4.     if (info.direction == "in") {
  5.         $(this).find('a.active').removeClass('active');
  6.     }
  7. });

としておけば解除されますよ。

という小ネタでした。

コメントなし

06月02日 

jQTouch

jQTouchちらつき対応(6/4追記)

ここ数日jQTouchでiPad用ローカルアプリを作ってるんですが、jQTouchオフィシャルではiPad用に2カラムを制御するための仕様策定が進んでいるようですね。

お手軽にiPhone・iPadの動きを伴ったjQTouchですが、画面遷移時に遷移後の画面が一瞬チラついたりして少し微妙な点があります。ソースを追って見たところ、アニメーションにはCSS3のアニメーション機能を使っているようです。
アニメーションを開始させるタイミングで、適したCSSをJSで指定してあげることで要素をアニメーションさせ、終わった段階でアニメーション用CSSを外してあげる。

ちらつきが発生する原因としては、アニメーション終了でCSSを外す時に同時にdisplay:noneになるのですが、ブラウザの仕様（？）で一瞬ちらつくみたいです。

ということで色々と対策を考えてdisplay:noneだけタイミングをずらしてみたりとか試してみたのですが上手く行かず。。。で、ググって見たら出てきました…orz

jqtouch.js

PLAIN TEXT
JAVASCRIPT:
  1. function animatePages(from, ...
  2.  
  3. scrollTo(0, 0);
  4.  
  5. // 追加ここから
  6. var toStart = 'translateX(' + (backwards ? '-' : '') + window.innerWidth + 'px)';
  7. // 6/4追記ここから
  8. if (animation.name == 'slideup' && backwards != true) {
  9.     toStart = 'translateY(0px)';
  10. }
  11. // 追記ここまで
  12. fromPage.css( 'webkitTransform', toStart );
  13. // 追加ここまで
  14.  
  15. var callback = function(event) {
  16.     // 追加1行
  17.     fromPage.css( 'webkitTransform', '');
  18.  
  19.     if (animation)

（元ネタのページは失念です。。。）

元のソースに手を入れるのは気が引けるところですが、これでバッチリちらつきを無くすことが出来ます。お悩みの方は是非お試し下さいませ。

(6/4追記)
slideupのアニメーションで、遷移前のページが消えてしまう為、ソース改変の一部を変更しました。
ちなみにドキュメントには書かれてない（？）と思うんですが、縦スライドさせたいときは「slideup」ですが、任意で横スライドさせたい場合は「slide」です。

1 コメント