我有几个divs
,但它们在语义上没有联系。因此,我想拥有几套divs
.
例子:
我希望能够在 {1,2,3,4,5} 之间左右滑动。其中一些页面有一个按钮,它应该打开(与slideup
页面转换)子页面。例如,4 中的按钮将向上滑动页面 4.1。然后我希望能够在 4.1、4.2 和 4.3 之间再次左右滑动。
我的divs
样子是这样的:
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">
<strong>Page 1</strong>
</h2>
</div>
<div data-role="content">
<strong>You are in page one.</strong>
</div>
</div>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">
<strong>Page 2</strong>
</h2>
</div>
<div data-role="content">
<strong>You are in page two.</strong>
<a href=#third data-transition="slideup">Go to page 3</a>
</div>
</div>
<div data-role="page" id="third">
<div data-role="header">
<h2 class="ui-title">Page three</h2>
</div>
<div data-role="content">
<strong>You are in page three.</strong>
</div>
</div>
使用以下 Javascript,我可以在data-role="page"
div 之间很好地左右滑动,但是,我无法区分子页面和主页面。我可以为主页面定义一个滑动(基本上使用我已经拥有的那个)然后为子页面定义另一个(也许通过使用ids
或其他东西来区分它们?)?
$(document).ready( function() {
$(document).on('swipeleft', 'div.ui-page', function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length >= 0) {
$.mobile.changePage(nextpage, {
transition: "slide",
reverse: false,
allowSamePageTransition: true
});
}
});
$(document).on('swiperight', 'div.ui-page', function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length >= 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true,
allowSamePageTransition: true
});
}
});
});