Запросы на jQueryMobile Swipe
Я реализовал перелистывание страниц, используя следующий код.
<!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>
Используя приведенный выше код, я могу перемещать переднюю и заднюю страницы, проводя.
Ниже приведены несколько запросов, которые у меня есть
- Предположим, если у вас есть 10 страниц для реализации в режиме пролистывания, мне нужно написать более 15 методов, чтобы переместить страницу вправо и влево. Есть ли другой простой способ, например, адаптер массива, чтобы добавить все страницы?
- Предположим, если я перемещаю эти страницы шесть раз, после этого, если я нажимаю клавишу "назад", чтобы закрыть приложение, шесть раз отображаются две одинаковые страницы. Но он должен отображаться только один раз и должен выйти из приложения при третьем щелчке.
Как это реализовать?
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>
Этот скрипт добавляет пролистывание влево и вправо, когда вы проводите:D . Проверено.
Для вопроса 2. В phonegap вы можете использовать этот прослушиватель событий:
document.addEventListener("backbutton", yourCallbackFunction, false);
Вам нужно создать историю var, когда вы проводите по страницам, вы добавляете в нее новые элементы. Когда вы нажимаете кнопку "Назад", вы читаете с нее и переходите на эту страницу. Сколько вы храните на нем (и что вы храните на нем), это ваш выбор. Но я не уверен, что это сработает, в основном от нажатия кнопки "назад".