请任何人建议如何使用查询移动左/右滑动页面
var nextpage = $(this).next('div[data-role="page"]');
不返回首页
答案 0 :(得分：2)
工作示例：http://jsfiddle.net/JB22E/4/
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
<a data-role="button" id="add-dynamic-page">Add new dynamic page</a>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 2</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
$(document).on('pageinit', '#article1', function(){
$(document).on('click', '#add-dynamic-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextPageId = parseInt($('body [data-role="page"]').length)+1;
$('[data-role="page"]').last().after('<div data-role="page" id="article'+nextPageId+'"><div data-role="header" data-theme="b" data-position="fixed" data-id="footer"><h1>Articles</h1></div><div data-role="content"><p>Article '+nextPageId+'</p></div><div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"><h1>Footer</h1></div></div>');
}
});
});
$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).off('swiperight').on('swiperight', '[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
这是我几个月前创建的一个例子。你会发现你需要的一切+更多。只需滑动以查看一切是如何工作的，您甚至可以单击“添加新动态页面”以查看此示例如何处理动态添加的页面。