いくつか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 を使用すると、div 間で左右にうまくスワイプできますがdata-role="page"
、サブページとメイン ページを区別する方法はありません。メインページにスワイプを定義し(基本的にはすでに持っているものを使用)、サブページに別のスワイプを定義できますか(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
});
}
});
});