如何通过jQuery UI Touch Punch在移动(触摸)设备上使用jQuery UI功能

本文概述

• 1.包括jQuery UI Touch Punch
• 2.使用插件

毫无疑问, jQuery UI是每个开发人员都会想到并依靠它来轻松实现用户交互功能(例如, 元素, 可拖动元素, 可排序元素和可放置对象的动态大小调整)的首批库之一。

但是, 尽管优点多于弊, 但该框架最著名的缺点之一是它不提供对移动触摸设备的支持。对于因jQuery而广为人知的人, 将这种行为视为默认行为的人, 在整个项目上实现jQuery UI并发现他的应用程序无法在移动设备中正常工作后, 他可能会失望。幸运的是, 有些人考虑了这个问题并决定致力于解决方案。我们正在谈论jQuery UI Touch Punch项目, 它通过使用模拟事件将触摸事件映射到其鼠标事件类似物来工作。只需将脚本包含在页面中, 你的触摸事件就会变成相应的鼠标事件, jQuery UI将按预期响应。

在本文中, 我们将向你展示如何通过仅添加一个额外的库轻松地为多个jQuery UI组件添加触摸支持。

1.包括jQuery UI Touch Punch

要添加触摸支持, 你仅需要可分发的jQuery UI Touch Punch的副本。你可以从Github的存储库中获得脚本的副本, 以下载开发版本或缩小版本。然后将其包括在jQuery UI的源代码之后, 就是这样：

<!-- 1. jQuery UI -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

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

包含文件后, 触摸支持将自动添加到jQuery UI。有关此库的更多信息, 请访问Github上的官方存储库或此处的官方网站。该库是根据MIT或GPL版本2许可证双重授权的, 因此可以免费使用, 修改和/或分发, 但是如果你在其他软件包或插件中包括Touch Punch, 请提供原始软件的所有权和链接。到Touch Punch网站。

2.使用插件

如前所述, 仅包含插件将使你通常的jQuery UI代码在触摸设备上工作。在受支持的触摸功能之间, 你可能会发现可调整大小, 可放下, 滑块, 手风琴, 可选内容等。

编码愉快！