Touch Punch在行動裝置上面增加jQuery UI的觸摸支援|Jquery UI 支援移動端 觸摸滑動等

標籤：

jQuery UI是我們前台開發常用的UI前端類庫，但是目前的jQuery UI使用者介面類庫在互動和widget上並不支援touch事件。這意味著你在案頭上設計的優雅的UI可能在觸摸裝置，例如，ipad，iphone和 Android上並不能正常工作。因為jQuery UI監聽的是mouseover，mousemove和mouseout事件，不是觸摸事件，touchstart，touchmove和 touched。

為瞭解決這個問題，這裡我們介紹jQuery UI Touch Punch類庫，它通過類比事件來將滑鼠事件匹配touch事件 。你只需要簡單的添加相關類庫即可。非常簡答，容易使用。

裝置支援

jQuery UI Touch Punch能完美的相容以下裝置的觸摸事件。

• iPad
• iPhone
• Android
• 其它基於觸摸的行動裝置

使用方法

繼續簡單的幾個步驟就可以實現在行動裝置上的觸摸事件。

1、引入jQuery和jQuery ui外掛程式庫檔案

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

2、引入 jQuery UI Touch Punch類庫

注意：在引入 jQuery UI Touch Punch類庫的時候，一定要放置在jQuery UI的後面，第一次調用jQuery UI的前面，這樣這個外掛程式才會生效。

<script src="jquery.ui.touch-punch.min.js"></script>

3、此時我們已經引用了jQuery UI Touch Punch外掛程式，所以只需要按照jQuery UI的方法調用，會自動在行動裝置上支援觸摸事件。

<script>$(‘#widget‘).draggable();</script>

這個外掛程式沒有任何參數，只是給jQuery UI外掛程式提供觸摸支援，如果你經常使用jQuery UI，而且需要在行動裝置上相容，那麼這個外掛程式你肯定用得到。

友情提示：靜態資源公用庫http://www.bootcdn.cn/jqueryui-touch-punch/

Touch Punch在行動裝置上面增加jQuery UI的觸摸支援|Jquery UI 支援移動端 觸摸滑動等