\nLinking between jQuery Mobile pages creates a transition animation between pages on compatible devices (e.g. iOS & Android). If running on a browserthe browser’s back button (which may be a hardware back button on some devices such as android) will go back to the first page.\n<\/p>\n
\n \n<\/p>\n
\nUse this in the page data-role:\n<\/p>\n
\r\n\r\n<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" data-back-btn-theme="e" >\r\n<\/div>\r\n<\/code><\/pre>\n\nAddress Bar Appearing When Navigating
\n<\/h4>\n
\nWhen the user navigates to another page the address bar may appear for a second and then hide again. This only happens with browser based webapps and can be avoided by using a full-screen webapp or a hybrid native app.\n<\/p>\n
\nLinking To Another Page In The Same Document
\n<\/h4>\n\r\n\r\n<a href="#id_of_the_page">\r\n<\/code><\/pre>\n\n \n<\/p>\n
\nLinking To Another Page File On The Same Domain
\n<\/h4>\n
\nUse a normal href link to the html or php file. jQuery Mobile will actually use AJAX to make the request to the other document and show a spinner while it gets it.\n<\/p>\n
\nThe destination page must be a 1 page document.\n<\/p>\n
\nThe framework takes only the first page (the first div with role="page") from the loaded document and discards any other content. So any information you add to the <head> of the target document will be ignored, with any other content outside the first page element. That means any CSS or JavaScript embedded in other documents and the title element will be ignored. If you want to support non jQuery browser this content shouldn't be removed as it will be used by them following the link as a normal web link, but as far as jQuery is concerned it doesn't exist.\n<\/p>\n
\nNon jQuery Links (Absolute External Links)
\n<\/h4>\n
\nTo link to another site or document that does not have jQuery Mobile content add data-rel="external" to the a tag. E.g.:\n<\/p>\n
\r\n\r\n<a href="http:\/\/www.somedomain.com" data-rel="external">\r\n<\/code><\/pre>\n\ntarget="_blank" > will also do the same thing.\n<\/p>\n
\n \n<\/p>\n
\nTransitions Between Pages
\n<\/h4>\n
\nBy default all the transitions between pages use the right-to-left animation. To change or to explicitly define which animation transition we want in every page change use data-transition inside the link.\n<\/p>\n
\nslide – The default right-to-left animation
\nslideup – Bottom-to-top animation (mostly used for modal pages)
\nslidedown – Top-to-bottom animation
\npop – The new page grows from a small point in the middle to a full-screen page
\nfade – A cross-fade animation between old and new pages
\nflip – A 2D or 3D rotation animation (3D is available only on some devices such as iOS devices. On other devices such as Android this transition renders a 2D less cool rotation).\n<\/p>\n
\r\n\r\n<a href="#page2" data-transition="fade">Next page<\/a>\r\n<\/code><\/pre>\n\nIf you want to force a reverse transition (back action) you can specify data-direction="reverse" on the link to cause jQuery Mobile to make the transition in reverse.\n<\/p>\n
\n \n<\/p>\n
\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Linking between jQuery Mobile pages creates a transition animation between pages on compatible devices (e.g. iOS & Android). If running on a browserthe browser’s back button (which may be a hardware back button on some devices such as android) will go back to the first page. Back Button In Header Use this in the […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[],"class_list":["post-781","post","type-post","status-publish","format-standard","hentry","category-links-jquery-mobile"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/781","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=781"}],"version-history":[{"count":13,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/781\/revisions"}],"predecessor-version":[{"id":797,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/781\/revisions\/797"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}