【jQuery UI Touch Punch】タッチデバイスに対応していないjQuery UIをスマートフォンなどのタッチデバイス対応にするjQuery UI拡張ライブラリ
2015.08.18
PCサイトでは重宝するけどタッチデバイスには対応していないjQuery UIをスマートフォンなどのタッチデバイスで使用可能にする
- HTML：
PCサイトでのドラッグ＆ドロップやリサイズに大変重宝するjQuery UIですが、 そのままではスマートフォンなどのタッチデバイスではうんともすんとも動きません。 PCサイトはスマートフォンからは見れないようにするから大丈夫というならあまり問題ではないかもしれませんが、 レスポンシブサイトなどの場合、 できれば同じコードやプログラムを使用してサイトを構築したいですよね。 そんなときに便利なのがjQuery UI Touch Punchです。 使い方はとても簡単で、 jQuery UIを利用するときと同じようにjQuery本体とjQuery UI本体を読み込み、 最後にjQuery UI Touch Punchのライブラリを読み込むだけでOKです。
- JavaScript：
- JavaScript：
$('#demo').draggable();
この拡張ライブラリを使用して、
タッチデバイスでjQuery UIの機能を使うことができる種類は、
- ・Draggable
- ・Droppable
- ・Resizable
- ・Selectable
- ・Sortable
- ・Accordion
- ・Autocomplete
- ・Slider
- ・Dialog
- ・Progressbar
となっています。
デモもたくさん掲載されているので、
とても参考になります。