jQuery Mobile iPhone 应用程序
Posted
技术标签:
【中文标题】jQuery Mobile iPhone 应用程序【英文标题】:jQuery Mobile Iphone application 【发布时间】:2012-01-08 05:29:03 【问题描述】:我正在尝试为 iPhone 创建一个 html5 Web 应用程序。我正在使用 jQuery Mobile。我的应用程序涉及在画布中绘图。它很像一个使用画布渲染草图的绘图应用程序。用户可以从任何方向在屏幕上滑动,应用程序应该能够计算出位置,然后在这些点上画线。
jQuery Mobile 只为滑动控件提供了以下一些基本事件,但我认为我需要对滑动进行更多控制,因为用户可以向任何方向滑动并且可以是任何像素长。另一方面,我应该能够捕捉到大部分的点,这样我就可以更清晰、更精确地想象这幅画了。
tap
Triggers after a quick, complete touch event.
taphold
Triggers after a held complete touch event (close to one second).
swipe
Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
swipeleft
Triggers when a swipe event occurred moving in the left direction.
swiperight
Triggers when a swipe event occurred moving in the right direction.
在 ios 应用程序的画布中创建绘图应用程序时,我应该遵循任何其他技术吗?任何帮助将不胜感激。
【问题讨论】:
【参考方案1】:您在 jQuery Mobile 文档的事件页面上错过的一些事件是虚拟事件:http://jquerymobile.com/demos/1.0/docs/api/events.html
vmousedown
Normalized event for handling touchstart or mousedown events
vmousemove
Normalized event for handling touchmove or mousemove events
vmouseup
Normalized event for handling touchend or mouseup events
vmousecancel
Normalized event for handling touch or mouse mousecancel events
我将使用vmousedown
事件开始跟踪光标的移动,vmousemove
继续跟踪光标的路径,vmouseup
结束跟踪光标的移动。
一个简单的例子是:
//setup a variable to store the cursor's movement
var tracks = [];
//bind to the three events described above
$(document).bind('vmousedown vmousemove vmouseup', function (event)
//check to see what event is being fired
if (event.type == 'vmousedown')
//if the `vmousedown` event is fired then reset the value of the `tracks` variable and add the first point to the variable
tracks = [ x : event.pageX, y : event.pageY];
else if (event.type == 'vmousemove')
//if the `vmousemove` event is fired then add a new point to the `tracks` variable
tracks.push( x : event.pageX, y : event.pageY);
else if (event.type == 'vmouseup')
//if the `vmouseup` event is fired then the user is done drawing and you can draw their line for them
);
【讨论】:
以上是关于jQuery Mobile iPhone 应用程序的主要内容,如果未能解决你的问题,请参考以下文章
jQuery mobile - phonegap - iPhone - 实用程序
使用 jQuery Mobile 和 Phonegap 为 iPhone 应用程序存储位置
为使用PhoneGap 构建的iPhone 应用程序加速jQuery Mobile 1.1 中的页面转换?
使用phonegap和jquery mobile开发iphone应用程序时如何禁用本机键盘上的Go按钮?