JQuery Mobile swipe to navigate as single page style - jquery-mobile

Question

I am new to JQuery Mobile. Currently trying to use JQM in an ASP.NET MVC project. I am following this tutorial found on JQM official site. But it uses multiple html pages.
<div data-role="page" id="page2" data-prev="page1" data-next="page3">
<div role="main" class="ui-content">
.....
</div>
</div>
Here data-next="page3" is used to show page3.html. My question- is page3.html being loaded by ajax while viewing page2.html ?. If I would like to use all the pages in a single html file by using JQM Page, how should i proceed?

Answer 1

data-next and data-prev are just arbitrary HTML5 data attributes used in the example to store the url of the next and previous pages. For internal pages you could set them to "#page2", "#page3", etc. So for 3 pages you might set it up like this:
<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>
Then you just update the example's javascript to use the internal url without adding the ".html" to it:
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 );
}
});
});
jQM uses the jqmData() function to get and set data attributes.
Here is a working DEMO