« | »

06月09日 

jQTouch

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

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

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

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

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

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

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

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

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

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

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

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. });

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

という小ネタでした。

コメント & トラックバック

コメントなし

コメントフィード

コメント