Question

我有几个divs，但它们在语义上没有连接。因此，我希望有几组divs。

示例：

我希望能够在{1,2,3,4,5}之间左右滑动。其中一些页面有一个按钮，该按钮应打开（slideup页面过渡）子页面。例如，4中的按钮将向上滑动第4.1页。然后我希望能够在4.1,4.2和4.3之间再次向左和向右滑动。

example

我的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
        });
    }
    });
});

也许与https://stackoverflow.com/questions/14688983/using-javascript-in-subpages-loaded-with-jquerys-changepage合作。

Answer 1

试试这段代码，似乎工作正常=）。

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>

JAVASCRIPT：

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
                    });
                }
            }
        }
    });
});

如何只滑动某些元素？

1 个答案: