How to swipe between several jquery mobile pages?
Futher req file avail
Ans:1
=====
<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 -->
Ans : 2
=======
universal to work with huge number of pages:
<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>
UPDATE: I tested this with the iPhone emulator and the Android emulator and it worked as expected in both.
ANS : 3
=======
This code also works for the swipe.
<script>
$('div.ui-page').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
</script>
Thanks for Ref:
http://stackoverflow.com/questions/7533772/how-to-swipe-between-several-jquery-mobile-pages
Futher req file avail
/ TouchSwipe-Jquery-Plugin
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
=====
<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 -->
Ans : 2
=======
universal to work with huge number of pages:
<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>
UPDATE: I tested this with the iPhone emulator and the Android emulator and it worked as expected in both.
ANS : 3
=======
This code also works for the swipe.
<script>
$('div.ui-page').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
</script>
Thanks for Ref:
http://stackoverflow.com/questions/7533772/how-to-swipe-between-several-jquery-mobile-pages
No comments:
Post a Comment