`

一个帮助你在触摸设备上使用jQuery UI的JS类库 - jQuery UI Touch Punch

jqueryUI触摸设备支持jQuery UI Touch PunchjQuery UI 
阅读更多

日期：2012-7-11  来源：GBin1.com

一个帮助你在触摸设备上使用jQuery UI的JS类库 - jQuery UI Touch Punch

在线演示

jQuery UI是我们前台开发常用的UI前端类库，但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件。这意味着你在桌面上设计的优雅的UI可能在触摸设备，例如，ipad，iphone和 Android上并不能正常工作。因为jQuery UI监听的是mouseover，mousemove和mouseout事件，不是触摸事件，touchstart，touchmove和 touched。

为了解决这个问题，这里我们介绍jQuery UI Touch Punch类库，它通过模拟事件来将鼠标事件匹配touch事件 。你只需要简单的添加相关类库即可。非常简答，容易使用。

支持设备

  • iPad
  • iPhone
  • Android
  • 其它基于触摸的移动设备

如何使用

类库使用非常简单，引入，jQuery，jQueryUI和 jQuery UI Touch Punch类库，如下：

.......

来源：一个帮助你在触摸设备上使用jQuery UI的JS类库 - jQuery UI Touch Punch

分享到：
| 分享一套帮助你优化开发web应用的jQuery插 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    前端项目-jqueryui-touch-punch.zip

    **Touch Punch** 是一个轻量级的jQuery插件，它使得jQuery UI的功能在触摸设备（如智能手机和平板电脑）上也能正常工作。由于原生的jQuery UI主要设计用于鼠标操作，因此在触摸设备上可能会出现一些功能不兼容的问题...

    jquery-ui-touch-punch-master.js

    jQuery UI Touch Punch是一个小巧而强大的JavaScript插件，它的主要作用是使基于jQuery UI的组件能够识别并处理触控事件，从而使得这些组件在触摸屏设备上也能正常工作。本文将详细介绍jQuery UI Touch Punch的工作...

    jquery-ui-1.8.20.custom

    - **适配移动**：考虑使用 jQuery UI Touch Punch 插件，使组件在触摸设备上也能正常工作。 - **遵循无障碍标准**：确保组件符合WCAG 2.0等无障碍标准，使更多用户能访问和使用。 总结，`jquery-ui-1.8.20.custom...

    jqueryui所需要的库文件下载

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，它提供了丰富的交互效果、可定制的主题以及多种可重用的组件。这个压缩包包含了在开发过程中可能需要的所有关键文件，使得无需通过官方网站慢速下载...

    jquery ui

    - **jQuery UI Touch Punch**：对于触摸设备的支持，使得jQuery UI也能在手机和平板上流畅运行。 - **jQuery UI与其他库的集成**：可以与Bootstrap、AngularJS、React等现代前端框架结合使用，扩展更复杂的应用...

    手机触屏滚动切换效果 js

    在本资源中，提到了"jquery-ui-touch-punch-master"，这是一个将jQuery UI手势应用于触摸设备的插件，使得开发者可以利用jQuery UI的API来处理触摸事件。 首先，我们要理解触屏滚动是如何工作的。在移动设备上，...

    jquery-ui.draggable.hold-to-drag:允许将对象从启用触摸的设备上的可滚动容器中拖出

    jquery-ui.draggable.touch-scroll-patch 进行简单的调整即可将对象从启用触摸的设备上从可滚动容器中拖出。 使用可拖动的延迟和距离参数调整功能。 如果直到延迟超时鼠标仍未移开距离，则开始拖动。 否则，事件将...

    jquery-draggable-touch:使用触摸事件使HTML元素可拖动

    但是，由于Touch Punch生成了虚假的鼠标事件，并且jQuery UI的可拖动插件在拖动元素时使用了这些虚假的鼠标事件，因此容易出错，并且包含奇怪的错误。 我决定只编写一个主要目标是触摸设备的可拖动插件，该插件...

    Mobile-Drag-and-Drop-UI:使用移动设备的 Jquery UI 的拖放列表的基本示例

    你可能需要使用像 `touch-punch` 这样的插件，它将触摸事件转换为模拟鼠标事件，以便于与 JQuery UI 的拖放功能兼容。 在 PHP 方面，虽然标签中提到 PHP，但这个示例主要涉及前端技术。不过，你可以将拖放操作与...

    jquery可拖动的页面分割（类似软件中的拖动分割）

    同时，考虑到移动设备的触摸操作，可以考虑使用touch-punch插件使Resizable组件支持触屏设备。 在实际项目中，我们可能还需要处理更多细节，例如响应式布局、边缘吸附效果、动画过渡等。对于更复杂的需求，可以查找...

    50个精彩JQuery插件案例

    16. **触摸事件**：对于移动设备，jQuery Touch Punch等插件可以将触控事件映射为鼠标事件，确保在触摸屏上的正常使用。 17. **响应式设计**：jQuery插件可以帮助实现响应式布局，如Bootstrap Grid系统，让网站在...

    ImitativeWIN8UI.rar

    通过jQuery Touch Punch等插件，可以使得网页上的元素响应触摸事件，提供与原生应用类似的用户体验。 5. **动态更新**：Windows 8 UI中的磁贴能够实时显示信息，如天气、新闻等。我们可以利用Ajax异步请求获取数据...

    jQuery网页可翻页的电子书特效

    jQuery UI的`.touch Punch()`插件可以将触摸事件转化为鼠标事件，使触控设备上的翻页同样流畅。 6. **性能优化**：为了确保在各种设备上都能流畅运行，需要对动画性能进行优化。这可能包括限制动画帧率、使用硬件...

    50个开发者最喜欢使用的jQuery插件

    36. **jQuery UI Touch Punch**：让jQuery UI在触屏设备上也能正常使用。 37. **Scrollspy**：监听滚动事件，根据当前可视区域高亮导航链接。 38. **Tocify**：自动生成页面目录的插件，便于用户查找内容。 39. *...

    几十种jquery导航菜单总有一个你喜欢

    jQuery Touch Punch等插件可以帮助实现这些功能。 13. 网格布局菜单：将菜单项以网格形式展示，可以创建现代感十足的布局，jQuery的 Masonry 或 Isotope 插件在这方面大有作为。 以上只是“几十种jQuery导航菜单”...

    Bootstrap ACE后台管理界面模板(扁平化)

    非常不错的轻量级易用的admin后台管理系统，基于Bootstrap3，拥有强大的功能组件以及UI组件，基本能满足后台管理系统的需求，而且能根据不同设备适配显示，而且还有四个主题可以切换。网页图标全采用FontAwesome，除...

    jui_filter_rules:创建规则以使用jQuery过滤数据集

    为了支持触摸事件，可以使用jquery.ui.touch-punch.min.js 使用jquery> = 1.8.3moment.js> = 1.7.2和jquery-ui> = 1.9.2测试） 版权所有[Christos Pontikis] [版权所有] [版权所有]： : 发行：1.0.7（2015年4月...

    JQuery实现的功能最强大的幻灯片相册

    jQuery Touch Punch是一个插件，可以让jQuery理解Hammer.js的手势。 8. **自定义功能**：根据需求添加额外功能，如自动播放、分页指示器、预览图等。 9. **性能优化**：通过延迟加载未显示的图片、减少DOM操作和...

    jquery的全部版本

    10. **移动和触屏支持**：随着移动互联网的发展，jQuery Mobile和jQuery Touch Punch等库应运而生，它们扩展了jQuery在触屏设备上的功能，使得开发者能够轻松创建响应式和触控友好的应用。 这个包含所有jQuery版本...

    jsPlumb开发入门教程(实现html5拖拽连线).pdf

    另外，如果你使用 1.7.x、1.8.x 的 jQuery UI，还需要额外引入 jQuery UI Touch Punch。 引入 jsPlumb 的方法： ```javascript <script type="text/javascript" src=...

Magicbox
Global site tag (gtag.js) - Google Analytics