Android 关于jQueryMobile刷卡的查询
我使用以下代码实现了页面滑动Android 关于jQueryMobile刷卡的查询,android,jquery-mobile,cordova,swipe,swipeview,Android,Jquery Mobile,Cordova,Swipe,Swipeview,我使用以下代码实现了页面滑动 <!DOCTYPE html> <html> <head> <title>Swipe Example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="cordova.js"></script> <
<!DOCTYPE html>
<html>
<head>
<title>Swipe Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="cordova.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// set your swipe threshold explicitly
$.event.special.swipe.horizontalDistanceThreshold = 120;
$(document).on("swiperight", "#home", function() {
$.mobile.changePage("#page1");
});
$(document).on("swipeleft", "#page1", function() {
$.mobile.changePage("#home");
});
}
</script>
</head>
<body onload="onBodyLoad()">
<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>
刷卡示例
函数onBodyLoad（）{
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
}
函数ondevicerady（）{
//明确设置刷卡阈值
$.event.special.swipe.horizontalDistanceThreshold=120；
$（文档）.on（“swiperight”，“home”，function（）{
$.mobile.changePage（“第1页”）；
});
$（文档）.on（“swipeleft”，第1页，函数（）{
$.mobile.changePage（“主页”）；
});
}
- 向右滑动以查看第1页
导航
是啊
您向右滑动以查看第1页
如何实现这一点
对于问题1，这里有一个工作示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>AnimeAddicts - Menü</title>
</head>
<script language="javascript1.7">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
var pageIds = new Array("#home", "#page1", "#page2", "#page3", "#page4"); // add page id's here, if page id doesn't here, it won't swipe that page
var pageSwipeSet = new Array(new Array(), new Array()); // this is only to know, which page has swipe function. this need, because if we doesn't use this it will add more then one listener for one or more page and it will bugging
var actPageNum = 0; // current page
function onDeviceReady() {
// set your swipe threshold explicitly
$.event.special.swipe.horizontalDistanceThreshold = 120;
swipeFunction();
}
function swipeFunction(){
if(actPageNum>0 && !pageSwipeSet[0][actPageNum-1]){
var previous = pageIds[actPageNum-1];
var previousActual = pageIds[actPageNum];
$(document).on("swipeleft", previousActual, function() {
$.mobile.changePage(previous);
actPageNum--;
swipeFunction();
});
pageSwipeSet[0][actPageNum-1] = true;
}
if(actPageNum<pageIds.length-1 && !pageSwipeSet[1][actPageNum+1]){
var next = pageIds[actPageNum+1];
var nextActual = pageIds[actPageNum];
$(document).on("swiperight", nextActual, function() {
$.mobile.changePage(next);
actPageNum++;
swipeFunction();
});
pageSwipeSet[1][actPageNum+1] = true;
}
}
</script>
</head>
<body onload="onBodyLoad()">
<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>
<div data-role="page" id="page2">
<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 2
</p>
</div>
</div>
<div data-role="page" id="page3">
<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 3
</p>
</div>
</div>
<div data-role="page" id="page4">
<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 4
</p>
</div>
</div>
</body>
您需要创建一个历史变量，当您在页面上滑动时，您需要在其上添加新元素。当你按下“后退”按钮时，你从中阅读，然后转到该页面。你在上面存储了多少（以及存储了什么），这是你的选择。但我不确定这是否有效，主要是通过按下后退按钮。感谢您提供的详细ans@golddragon007。我试试你的代码。
document.addEventListener("backbutton", yourCallbackFunction, false);