jquery mobile swipe page demo!
demo : http://jsfiddle.net/ezanker/L2GTD/1/
a.html
<!DOCTYPE html>
<html>
<head>
<title>Jazz Calendar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "slide"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "slide",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
// Handler for navigating to the next page
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
});
</script>
</head>
<body>
<div id="page1" data-role="page" data-prev="" data-next="#page2">
<div data-role="header" data-position='fixed'>
<h1>Page 1</h1>
</div>
<div data-role="content">
I am page 1
</div>
</div>
<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
<div data-role="header" data-position='fixed'>
<h1>Page 2</h1>
</div>
<div data-role="content">
I am page 2
</div>
</div>
<div id="page3" data-role="page" data-prev="#page2" data-next="">
<div data-role="header" data-position='fixed'>
<h1>Page 3</h1>
</div>
<div data-role="content">
I am page 3
</div>
</div>
</body>
</html>
good luck! :)
#jquery #mobile #swipe #page
