【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:



あとはjQuery UIを使う時と同じように、
JavaScript:
$('#demo').draggable();
と指定してあげるだけでスマートフォンなどのタッチデバイスでjQuery UIを使うことができるようになります。

この拡張ライブラリを使用して、
タッチデバイスでjQuery UIの機能を使うことができる種類は、

  • ・Draggable
  • ・Droppable
  • ・Resizable
  • ・Selectable
  • ・Sortable
  • ・Accordion
  • ・Autocomplete
  • ・Slider
  • ・Dialog
  • ・Progressbar

となっています。

デモもたくさん掲載されているので、
とても参考になります。





参考にしたホームページ・ブログ- I thank for this article. -

← 【ONEPAGE BUILDER FOR WORDPRESS】WordPressの投稿画面でシングルページレイアウトの固定ページを簡単に生成できるwordpressプラグイン
【dragreplace.js】スマートフォンなどのタッチデバイスでのドラッグ&ドロップにも対応したjQueryプラグイン →