我在我的项目中使用 jquery mobile,并且我尝试使用滑动效果,使用两个按钮更改到下一个和上一个 data-role=page。
我正在尝试使用这个 JavaScript,但我不知道为什么不起作用
感谢您的帮助。
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>
等等........
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
});
});
给出的答案是正确的,但是,您首先需要检查活动页面之前或之后是否存在现有页面。因为如果你打电话$.mobile.changePage()
on undefined
值,两个按钮将停止工作。
Demo http://jsfiddle.net/Palestinian/YMTzU/
$(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
});
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)