A typical page will be divided as: header, content, and footer. <div data-role="page"> <div data-role="header"> </div> <div data-role="content"> </div> <div data-role="footer"> </div> </div> The header and footer are optional. All code inside a page must be within one of the 3 sections. Hiding The Browsers Address Bar On compatible devices, such as Android-, webOS- and […]
Category: Pages
Changing Page
Changing The Page From Javascript Use the $.mobile.changePage method which allows you to transition to another page as if the user clicked a link. //Load an external page $.mobile.changePage("some_external_page.html"); //Transition to an internal page in the same document $.mobile.changePage($("#ThePageId")); changePage Properties transition transition name (default: "slide") reverse true/ false (default: false) type "get"/" […]
Dialogs
Dialogs are simply modal pages which have a close button of some form. <a href="./mydialog.html" data-rel="dialog" data-transition="pop">Pop up</a>
Header
<div data-role="page" id="Page0" data-theme="a"> <div data-role="header" data-theme="a"> <h1>Page 0</h1> </div>
Load Page Prior To Showing It
Use the $.mobile.loadPage method to bring a target page to the DOM but to not transition to it, i.e. if you want to prefetch content. Then use changePage in the future to transition to it with the jQuery DOM object.
Load page using POST
Load an external page sending data via POST <script> function viewProduct(idProduct) { $.mobile.changePage("productdetail.php", { method: "post", data: { action: 'getProduct', id: idProduct }, transition: "fade" }); } </script> <a href="javascript:viewProduct(4200)" data-role="button" >My Text</ a > The destination must be a jQuery Mobile document including headers and a data-role="page".
Loading message pop up
Use $.mobile.showPageLoadingMsg() and $.mobile.hidePageLoadingMsg() to show and hide the loading message pop up from code //Show the loading message then hide it after 3 seconds $.mobile.showPageLoadingMsg(); setTimeout(function() { $.mobile.hidePageLoadingMsg(); }, 3000);
Page Events
Page Creation Events Each page has its own creation or initialization events pagebeforecreate After the page is inserted in the DOM and before its widgets are created. pagecreate After the page is created but before widgets are rendered. pageinit After the page is fully loaded. Normally the most used event for a page. pageremove […]
Page Size & Style
The viewport is the area in which the page fits. You can specify its width and height and it can be smaller or larger than the total visible area of the screen. The scale and zoom features of the mobile browser can be used to work aroudn this. A mobile-friendly website typically should start with […]
Scrolling
Use $.mobile.silentScroll(y) to scroll to any position in the page without animation and event triggering.