Using the $.mobile.loadPage()
method, you can load an external page in the background into the DOM and enhance its contents without affecting the current page. This recipe shows you how to do the same.
Copy the full code of this recipe from the code/09/loadpage
source folder. You can launch this code by using the URL: http://localhost:8080/09/loadpage/main.html
.
Create
main.html
with the pageid="main"
, and add an emptydiv
tag and a link to#page1
, shown as follows:<div data-role="content"> <div id="msgdiv"></div> <a href="#page1" data-role="button">Show Page 1</a> </div>
Add an event handler for the
pagebeforeshow
event of#main
, and load#page1
using theloadPage()
method:$("#main").live("pagebeforeshow", function(event, data) { $("#msgdiv").html("<p>Current Active Page : " + $.mobile.activePage.attr("data-url") + "</p>"); $.mobile.loadPage( "page1.html", {role: "dialog...