Setting Page As An iOS Web App You can setup a few meta tags to tell iOS that your site can be added to the Home Screen as a web app. Once launched from there, all of the Safari elements are hidden. <!– DON'T LET USER ADJUST SIZE –> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <!– […]
Category: Pages
Header
<div data-role="page" id="Page0" data-theme="a"> <div data-role="header" data-theme="a"> <h1>Page 0</h1> </div>
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 […]
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 […]
Toolbars
Use $.mobile.fixedToolbars.show() and $.mobile.fixedToolbars.hide() to show and hide the fixed toolbars. The toolbars can be full screen or just fixed. You can’t hide real fixed toolbars for iOS5 and above. By default, they are shown and hidden using a fade transition. //show the toolbars immediately without fade animation $.mobile.fixedToolbars.show(true);
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);
Scrolling
Use $.mobile.silentScroll(y) to scroll to any position in the page without animation and event triggering.
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".
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"/" […]