zoukankan      html  css  js  c++  java
  • 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。

    Touch Punch在移动设备上面增加jQuery UI的触摸支持

    为了解决这个问题,这里我们介绍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/

  • 相关阅读:
    【刷题】BZOJ 1061 [Noi2008]志愿者招募
    【比赛】NOIP2017 列队
    react_app 项目开发 (6)_后台服务器端-node
    react_app 项目开发 (5)_前后端分离_后台管理系统_开始
    react_app 项目开发 (3)_单页面设计_react-router4
    react_app 项目开发 (2)_axios_pubsub-js
    react_app 项目开发
    React_基本原理_ajax
    React_生命周期
    组件化
  • 原文地址:https://www.cnblogs.com/dreamzhiya/p/4933903.html
Copyright © 2011-2022 走看看