如何只滑动某些元素？答案

【问题标题】：How to swipe only certain elements?如何只滑动某些元素？
【发布时间】：2013-02-02 23:37:07
【问题描述】：

我有几个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
        });
    }
    });
});

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

【问题讨论】：

你能为此做一个小提琴吗？？
@bipen 如果可以的话，我会的。否则我不会问，对吧？
我的意思是说只是一个小提琴..不是一个有效的小提琴或解决方案....我问的是这样我们就不必再重新创建整个事情了......我们可以拥有对你的 HTML 结构也有一些想法。我认为你在这里给出的 HTML 不是完整的 HTML

标签： jquery jquery-mobile swipe

【解决方案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
                    });
                }
            }
        }
    });
});

【讨论】：

几乎！当我滑动子页面时，标题移动错误的方式。动画向左移动，而不是向右移动。我认为这与reverse: false 有关。另外，您能否在子页面中包含一个链接，该链接可以返回到它们的来源？这将是一个slidedown 转换。
我刚刚注意到滑动子页面也会在后台滑动主页面。如果有人使用浏览器的后退按钮，它会显示奇怪的随机页面。
我很抱歉，但我不明白赞成。此解决方案无法正常工作。