在 jQuery UI 中, 使用像是 drag drop, slider 等, 在 iPhone/iPad/Android 上這種 touch 的設備, 可能會有不順或不支援的狀況, 這裡有個工具可以讓這樣的狀況改善, 並正常使用:
jQuery UI Touch Punch – http://touchpunch.furf.com/
這個只需要在引入 jQuery, jQuery UI 後, 再引入這個 jQuery UI Touch Punch 即可.
可以比較之前的一個範例: (原文: https://diary.tw/archives/1292 )
無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2.htm
無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1-1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2-1.htm
使用桌上型瀏覽器沒有差別, 不過使用 touch device 就有很明顯的差異了!
另外其實 jQuery Mobile 也有完整的功能, 若是直接要做 mobile 的網頁, 應該就直接使用 jQuery Mobile 的 framework 就有完整支援 touch 了:
jQuery Mobile 的 slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/