jquery mobile更改为下一个和以前的data-role =页面 [英] jquery mobile change to the next and previous data-role=page

问题描述

我在我的项目中与jquery mobile一起工作，而我试图做的是使用滑动效果，使用两个按钮切换到下一个和前一个data-role =页面。

即时通讯使用此javascript尝试，但我不知道为什么不工作

寻求帮助。

HTML：

 < div data-role =pageid = P1 > 
< div data-role =headerdata-theme =adata-position =fixeddata-id =footerdata-fullscreen =true> 
  < / div> 
< div data-role =content> 
 ..... something ...... 
< / div> 
< / div> 
 
< div data-role =pageid =p2> 
< div data-role =headerdata-theme =adata-position =fixeddata-id =footerdata-fullscreen =true> 
< a href =＃prvbuttondata-icon =arrow -lstyle =margin-right：340pxclass =ui-btn-rightdata-inline =truedata-iconpos =notextdata-direction =reverse>PáginaAnterior< / a> 
 < / div> 
< div data-role =content> 
 ..... something ...... 
< / div> 
< / div> 
  

等等........

Javascript：

  $（＃nextbutton）。on '，'#goforward'，function（）{
 var next ='＃'+ $ .mobile.activePage.next（'[data-role = page]'）[0] .id; 
 $ .mobile.changePage（next，{
 transition：'slide'
}）; 
}）; 
 $ b $ //上一页
 $（＃prvbutton）。on（'click'，'#goback'，function（）{
 var prev ='＃'+ $ .mobile.activePage.prev（'[data-role = page]'）[0] .id; 
 $ .mobile.changePage（prev，{
 transition：'slide'，
反向：真
}）; 
}）; 
  

解决方案

给出的答案是正确的，但是，您需要先检查活动页面之前或之后是否存在现有页面。因为如果您在 undefined 值上调用 $。mobile.changePage（），则两个按钮都将停止工作。

演示

  $（document）.on（'click'，' （$ .mobile.activePage.next（'。ui-page'）。length！== 0）{
 var next = $ .mobile.activePage.next （'.ui-page'）; 
 $ .mobile.changePage（next，{
 transition：'slide'
}）; 
} 
}）;如果（$ .mobile.activePage.prev（'。ui-page'））
 
 $（document）.on（'click'，'#goback'，function（）{
。长度！== 0）{
 var prev = $ .mobile.activePage.prev（'。ui-page'）; 
 $ .mobile.changePage（prev，{
 transition：' slide'，
 reverse：true 
}）; 
} 
}）; 
  

Im working with jquery mobile in my project and what i trying to do instead to use the swipe effect, use two button to change to the next and to the previous data-role=page.

im trying with this javascript but i dont know why isn't working

thx for any help.

HTML:

<div data-role="page" id="p1">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" id="goback" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" id="goforward" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

<div data-role="page" id="p2">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

and so on........

Javascript:

$("#nextbutton").on('click', '#goforward', function () {
 var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id;
 $.mobile.changePage(next, {
    transition: 'slide'
 });
});

// Previous page
$("#prvbutton").on('click', '#goback', function () {
 var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id;
 $.mobile.changePage(prev, {
    transition: 'slide',
    reverse: true
 });
});

解决方案

The answer given is correct, however, you need first to check whether there is an existing page before or after the active page. Because if you call $.mobile.changePage() on undefined value, both buttons will stop working.

Demo

$(document).on('click', '#goforward', function () {
  if ($.mobile.activePage.next('.ui-page').length !== 0) {
   var next = $.mobile.activePage.next('.ui-page');
   $.mobile.changePage(next, {
       transition: 'slide'
   });
  } 
});

$(document).on('click', '#goback', function () {
  if ($.mobile.activePage.prev('.ui-page').length !== 0) {
   var prev = $.mobile.activePage.prev('.ui-page');
   $.mobile.changePage(prev, {
       transition: 'slide',
       reverse: true
   });
  }
});

这篇关于jquery mobile更改为下一个和以前的data-role =页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！