From 8308ccc70b440d957ea486ab3828d725097f95e7 Mon Sep 17 00:00:00 2001
From: Anne-Gaelle Colom jQuery Mobile's central abstraction is the use of multiple pages inside a single HTML document. The children of the Only one page is visible at a time. Upon navigation, the currently visible page is hidden, and another page is shown. Moving from one page to another is accomplished via a transition. This is not possible when navigating between HTML documents via HTTP, because the browser discards all state associated with the source page when navigating to the target page, making it impossible to perform this task via a smooth transition effect such as a fade or a slide.button or a elements by simply adding classes.
+ button or a elements by simply adding classes.Transition to class-based styling
Keeping in mind the followings will make it easy for you to transition from the button styling based on data attributes to the class-based process:
From 652388b8165c0c81720b9a43fcaa38d1e02851ca Mon Sep 17 00:00:00 2001
From: Anne-Gaelle Colom Smooth Navigation Between Pages
- Note: The body element. This limitation will be removed in future versions of jQuery Mobile.
+ body element. This limitation will be removed in future versions of jQuery Mobile.body are all div elements that have been enhanced into page widgets. These are jQuery Mobile pages.Multipage Documents
@@ -62,7 +62,7 @@
If these criteria are met jQuery Mobile retrieves the document via Ajax. It is important to realize that, while the document is retrieved in its entirety, only the first jQuery Mobile page is displayed. The header and the rest of the body are discarded. Thus, it is not possible to retrieve a multi-page document via Ajax, nor is it possible to execute scripts located in the header.
-After Ajax retrieval, jQuery Mobile displays the page via a transition. The transition can be specified on the link that opens the page using the data-transition attribute. If no transition is specified, then $.mobile.defaultPageTransition is used or, if the incoming page is a dialog, then $.mobile.defaultDialogTransition is used. Note: The dialog widget is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.
After Ajax retrieval, jQuery Mobile displays the page via a transition. The transition can be specified on the link that opens the page using the data-transition attribute. If no transition is specified, then $.mobile.defaultPageTransition is used or, if the incoming page is a dialog, then $.mobile.defaultDialogTransition is used.
If the browser supports the replaceState API the location bar is updated such that it displays the URL of the document that was retrieved via Ajax. This latter step has the following implication for site/application design: Since the user can copy the URL of a page other than the start page, the application must be designed such that it can start from any of its pages. The best way to achieve this is to include jQuery Mobile and your application code in the header for all the pages of the site/application, and ensure initial state consistency during the pagecreate event.