JQM指定滑动页面更改 [英] JQM specifying swipe page change

问题描述

尝试制作移动网络应用.第三个页面，即第1条，第2条，第3条在滑动时应彼此过渡.在每个文章页面中，应该有指向其他页面的链接，这些链接以翻转的方式显示.我设法使其正常工作，但是我正在使用的代码导致该应用程序能够在我的所有页面"中滑动，而我只希望针对滑动功能的目标是文章"页面.我认为主要是需要更改JQ才能直接转到特定页面，这可能吗?我现在使用的JQ var nextpage = $ .mobile.activePage.next('[data-role ="page"]');如果我将所有文章页面的ID都设为文章"，那么我该如何将其定位为data-role ="page"，同时指定仅文章ID的页面呢?

Trying to make a mobile webapp. Three of the pages namely article1,2,3 should transition from one another on swipe. Within each article page there should be links to other page that show up with a flip transition. I have managed to sort of make it work however the code I am using is causing the app to be able to swipe through all of my 'pages' while I wish to target only the 'article' pages for the swipe feature. I think mainly the JQ needs to be changed to go directly to specific pages, is this possible? The JQ i currently uses var nextpage = $.mobile.activePage.next('[data-role="page"]'); if i gave all article pages an id of 'article' how would i get it to target data-role="page" while also specifying pages with an ID of article only?

文章页面示例(滑动至第2条和第3条):

Article Page Example (to swipe to article 2 and 3):

<div data-role="page" id="article1">

<div data-role="content">

  <a href="#pagetwo" data-transition="flip"><div style="width:50px; height: 50px; background-color:blue;"></div></a>


<a href="#pagethree" data-transition="flip"><div style="width:50px; height: 50px; background-color:blue; float: right;"></div></a>


</div>

示例页面(链接位于文章页面之一并翻转):

Example page (link lies within one of the article pages and flips):

<div data-role="page" id="pagethree">
<div data-role="header">
<h1>Welcome To pagethree</h1>
</div>

<div data-role="main" class="ui-content">
<p>Click on the link to go back. <b>Note</b>: fade is default.</p>
<a href="#article1" data-transition="flip" data-direction="reverse">Go back to Page One</a>
</div>

JQ:

<script>

$(document).on('swipeleft', '.ui-page', function(event){    
if(event.handled !== true) // This will prevent event triggering more then once
{    
    var nextpage = $.mobile.activePage.next('[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
    }
    event.handled = true;
}
return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
if(event.handled !== true) // This will prevent event triggering more then once
{      
    var prevpage = $(this).prev('[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
    }
    event.handled = true;
}
return false;            
});


</script>

推荐答案

我是个白痴.我只是替换了var nextpage = $ .mobile.activePage.next('[data-role ="page"]');; var nextpage = $ .mobile.activePage.next('#article');

I am an idiot. I simply replaced var nextpage = $.mobile.activePage.next('[data-role="page"]'); with var nextpage = $.mobile.activePage.next('#article');

这篇关于JQM指定滑动页面更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！