Buttonのdisable,enable

1.4から(?)div要素のclassにui-btnなどを加える事で簡単にボタンにすることができるようになりました。ボタンの無効化、有効化はbuttonウィジェットのAPIを使ってもできますが、以下のようにclassを操作するだけでも簡単に行えます。カスタムウィジェットなどを作っている時などは他のウィジェットのAPIをあまり呼びたくないので便利です。

無効化

$('#hoge_btn').addClass( "ui-state-disabled" );

有効化

$('#hoeg_btn').removeClass("ui-state-disabled");

jQuery Mobile 1.4対応のプラグイン

jQuery Mobile 1.4対応のプラグインをまとめていきたいと思います。jQuery Mobile専用のプラグインのみ扱いたいと思います。

DateBox

 







1.4からjQuery UIのDateboxもウィジェットとして使えるようになりましたが、こちらの方が個人的には使い勝手が良いです。日付入力のテキストボックスをクリックしても、キーボードが入力モードにならないため、スマホなどでは素早く日付選択ができます。
 

jQM-dynamic-popup

 ポップアップを動的に追加しようとすると自分でDOMにポップを表示するDIVなどを追加する手間がかかりますが、このプラグインを使用すると以下のように１行だけでポップアップが表示できます。

$.dynamic_popup('<div><h1>動的にポップアップ追加！</h1></div>');

Editable Listview

リストへ項目の追加と削除を行う事ができるプラグインです。

Listviewアイコンサイズを大きくする

ListViewウィジェットでアイコンを表示する事ができますが、16pxがディフォルトでかなり小さく感じますので24pxとして表示されるように変更してみました。

標準16px

変更後の24px

.ui-listview .ui-li-icon {
  position: absolute !important;
  max-height: 24px !important;
  max-width: 24px !important;
  left: 10px !important;
  top: 10px !important;
}

vclickイベントの取り扱い方

iphone,ipadではclickイベントは実際にボタンがタッチされた0.3秒後ぐらいに発火されるようです。そのため、動作がもっさりしているように感じてしまいます。

0.3秒待たずにボタンのクリックを受け取る方法として、jQuery Mobileではvclickイベントを使用する事ができますが実際に使用してみていくつか注意点がありました。

ヘルプにも書かれていることですが、vclickイベントが発火されてから0.3秒後に同じ位置にclickイベントが打たれます。そのため、vclickイベントでPopupなどをボタンの上に出すと、ポップアップでボタンのクリックした部分と同じ位置にあるボタンなどがクリックされます。

逆に言うと同じ位置にPopupが出たり、スクロールしたりしなければ今の所使っていても不都合がないように感じます。

ポップアップがボタンと同じ場所に表示される場合

ポップアップ内のボタンのイベントで弾くようにいたしました。