JQueryMobile(Alpha 4.1)で開発してみて困った事のまとめ

ブログ | 2011/6/10 19:54
困ってばっかりで、解決できてないものもありつつ。備忘録。


1.ページ遷移するたび、履歴が溜まっていく

JQueryMobileではリンクをクリックすると、ajaxで一部だけ読み込み、既存のDOMに追加して遷移したように見せる。
だからページ遷移すればするほどDOMが肥大化していく。
履歴があると、ページ遷移が早くなるというメリットもあるけど
Webアプリだとずっと更新されずに前回表示された内容が残ったままというのも制御がしづらくなる。

nonHistorySelectorsというプロパティをうまく使えば実現できるのかもしれないけど
いまいち良く分からなかったので、ざくっと非表示になったら毎回消すようにしてみたらうまくいった。

$(document).bind('pagehide',function(event, ui){
   $(event.target).remove();
});


2.footerをfixedに指定すると、消えてしまうことがある

どうも、backボタンで、履歴のページに戻るときや
Dialogで×ボタンを押して戻るときに消えてしまうようだ。
消えるといっても見えないだけで、footerはちゃんと存在しててクリックしたりはできる。
画面を縦にしたり横にしたりすると再び出現する。
これは対処方法がわからず困った。
とりあえず上記の対応で履歴自体利用しない設計にして逃げた。
Dialogも使わないことにした。
JQueryMobileのバージョンアップで直らないかな?


3.swipeが感度よすぎ

スクロール時のちょっとした円運動でも、swipeと認識してしまう。
これでは使いにくかったので、コードを修正して対応した。
詳しい対処方は下のエントリーで。
http://www.rottel.net/ma2kubo/115069


4.safariのアドレスバーが邪魔
画面が小さい分、少しでも表示領域を広げたい。
そんなときは、自動でちょっとスクロールさせてあげる。
$(document).bind('pageshow',function(event, ui){
   setTimeout('scrollTo(0,1)',100);
});
画面の傾きにも対応したいとき用。
$(document).bind('orientationchange',function(event, ui){
   setTimeout('scrollTo(0,1)',100);
});


5.autofocusが出来ない
hml5のautofocusを指定しても、画面遷移中のエフェクト時にはフォーカスが当たるけど
エフェクトが終了するとフォーカスが外れてしまう。
pageshowイベントでjavascriptでfocusを当てると、カーソルは当たるけど
入力状態(仮想キーボードが出る状態)にはならない。(これはsafariのせいかな)
対処法求む。
縮小 拡大

ログインしておくと、後で編集が可能です。

Rottel内コンテンツ

ユーザー一覧

Rottelとは?
利用規約
開発飲料
利用者の声
ヘルプ
close