jQuery Mobile的手势刷卡android系统中的PhoneGap应用左/右的问题 [英] Jquery Mobile Gesture Swipe left/right issue in android phonegap application
问题描述
我想实现在Android的jQuery Mobile的/ PhoneGap的左/右轻扫。我有样code，但是当我刷卡，没事就它发生。
I am trying to achieve left/right swipe in jquery mobile/phonegap in android. I have sample code, but when i swipe, nothing occurs on it.
下面是我的javascript code
Here is my javascript code
$("#listitem").swiperight(function() {
$.mobile.changePage("#page1");
});
下面是主体内容
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li><a href="#home">Back to the Home Page</a></li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
推荐答案
事件处理程序只能绑定到当前选定的元素和它们必须存在在页面上你的code使得呼叫<时间/ STRONG>。文档元素是加载任何其他HTML之前在文档的头可用，因此它是安全的重视有事件，而无需等待文件准备就绪。
Event handlers are bound only to the currently selected elements and they must exist on the page at the time your code makes the call. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
此外如 JQM文档提到可以绑定这些事件就像你将与其他jQuery的事件，用活（）或绑定（）。
Furthermore as mentioned in the jQM docs you can bind to these events like you would with other jQuery events, using live() or bind().
您可以检查下面的例子：
You may check the following examples:
<!DOCTYPE html>
<html>
<head>
<title>Swipe</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$('#listitem').live("swiperight", function(){
$.mobile.changePage("#page1");
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li><a href="#home">Back to the Home Page</a></li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html>
<head>
<title>Swipe Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("swiperight", "#listitem", function() {
$.mobile.changePage("#page1");
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li><a href="#home">Back to the Home Page</a></li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
</body>
</html>
实施例3：
<!DOCTYPE html>
<html>
<head>
<title>Swipe Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li><a href="#home">Back to the Home Page</a></li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
<script>
$("#listitem").swiperight(function() {
$.mobile.changePage("#page1");
});
</script>
</body>
</html>
这篇关于jQuery Mobile的手势刷卡android系统中的PhoneGap应用左/右的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
