with the flow

WEBプログラマを目指すWEBデザイナーが書き綴る開発日誌のようなもの

jQTouchのフォームをページ遷移でsubmit

iPhoneAndroid向けのサイトを簡単に作れるフレームワークと言えば、最近話題のSencha TouchとかjQuery Mobileとか、いろいろありますが。

動作が速くてjsコードも短め、手軽に実装できるのはやはりjQTouchなのではないかと。

最近jQTouchの担当者がSencha Touchのメンバーに入っちゃって、そっちが忙しくなってるぽいですが。
でもjQTouchの方はMIT Licenseで残してくれるみたい!
http://blog.jqtouch.com/

べんりべんりって書いてあるのではじめ本家からダウンロードしているのを使ってみたら、ブラウザの「戻る」ボタンを押されたときの挙動が不安定・・・いきなりページが黒くなったり。。。
ということでなんかないのかと探したら、githubでいろんな人が改善を重ねた最新のブツがあるじゃないですか!!
https://github.com/senchalabs/jQTouch

本家配布が確か106とかで、2011/1/20更新の最新版revが161ってw改善されずぎw
使ってみると、個人的にはもうβとってもいいんじゃないかという出来です。ヒストリーの問題も改善されてたし。jQuery1.5でも動いたし。body直後にdiv#jqtが作られてて、その中にあるものだけに適用されるようになってた。ナイス変更!

ただ、jQTouchの基本的な考え方は1つのページにすべてをあらかじめ読み込み、もしくはajaxで必要部分だけ取得という考え方なので、あらかじめそういう風に作っていない既存サイトを移植するのは結構たいへん。formとか、フツーにページを変えて遷移させたいんですけど。。。みたいな。
formとかaとか基本的なタグをpreventDefault()されちゃってるから。。まあシンプルに実装できて簡単にhtmlを記述できるところが売りだから当然っちゃ当然か。

ということで、formの部分とかは以下のようにしてみた。

// Bind events
$body.bind('touchstart', touchStartHandler)
  .bind('click', clickHandler)
  .bind('mousedown', mousedownHandler)
  .bind('orientationchange', orientationChangeHandler)
  .bind('submit', submitHandler)
  .bind('tap', tapHandler)
  .trigger('orientationchange');

$bodyは

// Make sure we have a jqt element
  $body = $('#jqt');

と定義されてるように、#jqtのことですな。
なので、これの"submitHandler"が割り当てられている部分を

              ・
              ・
              ・
  .trigger('orientationchange');
$(".jqForm").bind('submit', submitHandler);

上記のように修正。
これで".jqForm"がついた内部のformだけにjQTouch機能が効くようになり、フツーにページ遷移で値が送られるようになりました。