3

いくつか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
        });
    }
    });
});

多分https://stackoverflow.com/questions/14688983/using-javascript-in-subpages-loaded-with-jquerys-changepageで。

4

1 に答える 1

2

このコードを試してみてください。問題なく動作するようです =)。

HTML:

<!--PAGE 1-->
<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>
        <a href="#subpage1_1" name="lnk" data-transition="slideup">Go to page 1.1</a>
    </div>
</div>
<!--PAGE 2-->
<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="#subpage2_1" name="lnk" data-transition="slideup">Go to page 2.1</a>
    </div>
 </div>
 <!--PAGE 3-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page 3</h2>
    </div>
    <div data-role="content">
        <strong>You are in page three.</strong>
    </div>
</div>
<!--PAGE 4-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page 4</h2>
    </div>
    <div data-role="content">
        <strong>You are in page four.</strong>
        <a href="#subpage4_1" name="lnk" data-transition="slideup">Go to page 4.1</a>
    </div>
</div>
<!--PAGE 5-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page 5</h2>
    </div>
    <div data-role="content">
        <strong>You are in page five.</strong>
    </div>
</div>
<!--SUBPAGE 1.1-->
<div data-role="page" id="subpage1_1">
    <div data-role="header">
        <h2 class="ui-title">Page 1.1</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 1.1.</strong>
    </div>
</div>
<!--SUBPAGE 1.2-->
<div data-role="page" id="subpage1_2">
    <div data-role="header">
        <h2 class="ui-title">Page 1.2</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 1.2.</strong>
    </div>
</div>

 <!--SUBPAGE 2.1-->
 <div data-role="page" id="subpage2_1">
    <div data-role="header">
        <h2 class="ui-title">Page 2.1</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 2.1.</strong>
    </div>
</div>
<!--SUBPAGE 4.1-->
<div data-role="page" id="subpage4_1">
    <div data-role="header">
        <h2 class="ui-title">Page 4.1</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 4.1.</strong>
    </div>
</div>
<!--SUBPAGE 4.2-->
<div data-role="page" id="subpage4_2">
    <div data-role="header">
        <h2 class="ui-title">Page 4.2</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 4.2.</strong>
    </div>
</div>
<!--SUBPAGE 4.3-->
<div data-role="page" id="subpage4_3">
    <div data-role="header">
        <h2 class="ui-title">Page 4.3</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 4.3.</strong>
    </div>
</div>

ジャバスクリプト:

var num_pages = 5;
var curr_subpage = 0;
var subpage = false;
var curr_subnum = 0;
var curr_url;

$(document).ready( function() {

    var links = document.getElementsByName("lnk");

    links[0].onclick = function(e) { curr_subpage = 1; curr_subnum = 1; };
    links[1].onclick = function(e) { curr_subpage = 2; curr_subnum = 1; };
    links[2].onclick = function(e) { curr_subpage = 4; curr_subnum = 1; };

    $(document).on('swipeleft', 'div.ui-page', function () {
        var nextpage = $(this).next('div[data-role="page"]');
        var url = $(this).next('div[data-role="page"]').attr('data-url');
        console.log("1: "+url);

        curr_url = $('div.ui-page').attr('data-url');
        console.log("2: "+curr_url);

        if (nextpage.length >= 0)
        {
            if(curr_url == url)
            {
                $.mobile.changePage(nextpage, {
                    transition: "slide",
                    reverse: false,
                    allowSamePageTransition: true
                });
            }else{
                var subpage_url = "subpage"+curr_subpage+"_"+(curr_subnum+1);
                if( url == subpage_url)
                {
                    curr_subnum++;
                    $.mobile.changePage(nextpage, {
                        transition: "slide",
                        reverse: false,
                        allowSamePageTransition: true
                    });
                }
            }
        }
     });

    $(document).on('swiperight', 'div.ui-page', function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        var url = $(this).prev('div[data-role="page"]').attr('data-url');
        console.log(url);

        curr_url = $('div.ui-page').attr('data-url');

        if (prevpage.length >= 0)
        {
            if(curr_url == url && curr_subnum == 0)
            {
                $.mobile.changePage(prevpage, {
                    transition: "slide",
                    reverse: true, 
                    allowSamePageTransition: true
                });
            }else{
                var subpage_url = "subpage"+curr_subpage+"_"+(curr_subnum-1);
                if( url == subpage_url)
                {
                    curr_subnum--;
                    $.mobile.changePage(prevpage, {
                        transition: "slide",
                        reverse: false,
                        allowSamePageTransition: true
                    });
                }
            }
        }
    });
});
于 2013-02-06T13:38:18.090 に答える