小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

黄舟
Freigeben: 2017-02-15 14:00:16
Original
1316 Leute haben es durchsucht

当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。

一、轻击与按住

直接上代码(一切皆在代码中,细细品吧!)


   练习       

Tap事件处理

轻击页面进入下一页
按住不放,打开关于对话框

Tap事件处理

轻击页面返回前一页

关于本程序

演示轻击触控事件响应

Nach dem Login kopieren

tap:轻击事件


taphold:按住事件

二、轻扫

轻扫是指用手指或手写笔快速在屏幕上向左或向右快速滑动,会触发swipeleft事件或者swiperight事件。


   练习       

swipe事件处理

向右滑动页面进入下一页
向左滑动页面,打开关于对话框

swipe事件处理

向右滑动页面进入前一页br/> 向左滑动页面,打开关于对话框

关于本程序

演示swipeleft&swiperight触控事件响应

Nach dem Login kopieren

上面代码中用到了一个技巧,在界面切换过程中如果需要改变切换效果,则必须使用超级链接了实现,将该链接的display属性设为none,在监听函数中调用click()方法执行界面切换,然后在链接中添加data-transition进行切换效果设置。


三、虚拟鼠标事件


事件 含义
vmouseover 触控或者滑动DOM容器之上
vmoseout 触控或者滑动离开
vmousedown 触摸或者按下
vmoseup 触摸结束或者鼠标按键释放
vclick 触摸结束或鼠标按键被释放
vclick事件通常在vmouseup事件后300ms触发
vmousecancel 触控事件中发起mousecancel事件时触发
...... ......
...... ......
   练习       

vMouse事件处理

轻击页面,显示点击位置

内容底部
Nach dem Login kopieren

以上就是小强的HTML5移动开发之路(52)——jquerymobile中的触控交互的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Aktuelle Ausgaben
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!