\nA typical page will be divided as: header, content, and footer.\n<\/p>\n
\r\n\r\n<div data-role="page">\r\n <div data-role="header">\r\n <\/div>\r\n <div data-role="content">\r\n <\/div>\r\n <div data-role="footer">\r\n <\/div>\r\n<\/div>\r\n<\/code><\/pre>\n\nThe header and footer are optional. All code inside a page must be within one of the 3 sections.\n<\/p>\n
\nHiding The Browsers Address Bar
\n<\/h4>\n
\nOn compatible devices, such as Android-, webOS- and iOS- devices, jQuery Mobile will try to hide the browser’s address bar by manipulating the initial scroll. This hack will only work if the content is tall enough to fit the available space.\n<\/p>\n
\nOrientation Changes
\n<\/h4>\n
\njQuery Mobile will manage orientation changes between portrait or landscape itself on most devices adapting the UI automatically to the new viewport.\n<\/p>\n
\nBrowser Title
\n<\/h4>\n
\nThe documents title is the browsers title which will be stored when bookmarking etc. I fyou want to change it when in different pages within a document use data-title:\n<\/p>\n
\r\n\r\n<div data-role="page" id="page2" data-title="New Title To Use">\r\n<\/code><\/pre>\n\nPage Title
\n<\/h4>\n
\nSet using the <h1> tag in the header (h1 using the standard stylesheet). If it doesn't fit on a device it will be auto cropped.\n<\/p>\n
\nFooter Title Text
\n<\/h4>\n
\nSet using the <h4> tag in the footer (h4 using the standard stylesheet). If it doesn't fit on a device it will be auto cropped.\n<\/p>\n
\nMultiple Pages Within 1 Document
\n<\/h4>\n
\nIf there is not dynamic content you can have lots of pages in 1 document and its a balance between the user getting all of the pages in a single download of a file and the file being so big that its slow to download.\n<\/p>\n
\nAccessing the current page
\n<\/h4>\n
\nUse the $.mobile.activePage attribute that is automatically linked to the current visible data-role="page" element. \n<\/p>\n
\r\n\r\n\tvar currentPageId = $.mobile.activePage.id;\r\n<\/code><\/pre>\n\nYou can access the current page container (usually the body element) with the $.mobile.pageContainer attribute. \n<\/p>\n
\n \n<\/p>\n
\n \n<\/p>\n
\n <\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[],"class_list":["post-772","post","type-post","status-publish","format-standard","hentry","category-pages"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=772"}],"version-history":[{"count":13,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/772\/revisions"}],"predecessor-version":[{"id":1385,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/772\/revisions\/1385"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}