如何在几个jquery移动页面之间滑动? [英] How to swipe between several jquery mobile pages?
本文介绍了如何在几个jquery移动页面之间滑动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这里是摘录的代码,适用于2页:
Here is the code extract which works well with 2 pages:
<script>
$(document).ready(function() {
window.now = 1;
$('#device1').live("swipeleft", function(){
window.now++
$.mobile.changePage("#device"+window.now, "slide", false, true);
});
$('#device2').live("swiperight", function(){
window.now--;
$.mobile.changePage("#device"+window.now, "slide", true, true);
});
});
</script>
...
<div data-role="page" id="device1">
...
</div><!-- /page -->
<div data-role="page" id="device2">
...
</div><!-- /page -->
我如何使处理大量页面变得更加普遍?
How can I make it more universal to work with huge number of pages?
推荐答案
这似乎可以满足您的要求
This seems to do what you want
<script>
$(document).ready(function() {
$('.ui-slider-handle').live('touchstart', function(){
// When user touches the slider handle, temporarily unbind the page turn handlers
doUnbind();
});
$('.ui-slider-handle').live('mousedown', function(){
// When user touches the slider handle, temporarily unbind the page turn handlers
doUnbind();
});
$('.ui-slider-handle').live('touchend', function(){
//When the user let's go of the handle, rebind the controls for page turn
// Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
setTimeout( function() {doBind();}, 100 );
});
$('.ui-slider-handle').live('mouseup', function(){
//When the user let's go of the handle, rebind the controls for page turn
// Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
setTimeout( function() {doBind();}, 100 );
});
// Set the initial window (assuming it will always be #1
window.now = 1;
//get an Array of all of the pages and count
windowMax = $('div[data-role="page"]').length;
doBind();
});
// Functions for binding swipe events to named handlers
function doBind() {
$('div[data-role="page"]').live("swipeleft", turnPage);
$('div[data-role="page"]').live("swiperight", turnPageBack);
}
function doUnbind() {
$('div[data-role="page"]').die("swipeleft", turnPage);
$('div[data-role="page"]').die("swiperight", turnPageBack);
}
// Named handlers for binding page turn controls
function turnPage(){
// Check to see if we are already at the highest numbers page
if (window.now < windowMax) {
window.now++
$.mobile.changePage("#device"+window.now, "slide", false, true);
}
}
function turnPageBack(){
// Check to see if we are already at the lowest numbered page
if (window.now != 1) {
window.now--;
$.mobile.changePage("#device"+window.now, "slide", true, true);
}
}
</script>
更新:我在iPhone模拟器和Android模拟器上对此进行了测试,并且两者都能按预期工作.
更新:更改了答案,以解决用户对使用导致向左/向右滑动的滑块的评论.
UPDATE: I tested this with the iPhone emulator and the Android emulator and it worked as expected in both.
UPDATE: Changed answer to address the user's comment about using a slider causing swipe left/right.
这篇关于如何在几个jquery移动页面之间滑动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文