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/
时间： 2024-10-07 05:02:49