jQuery Mobile: The Concept of Linking Mobile Pages (1)
- a jQM page is bounded by a <div> box with data-role=’page’ attribute (based on custom data attributes - HTML 5 standard)
- more than one jQM page can be defined in a HTML document
- the first jQM page is always loaded and rendered if the HTML document is loaded through sync. HTTP request, i.e not Ajax (async)
- a jQM page can be loaded via HTTP request or Ajax (xmlHttpRequest) request
- by default, jQM loads a mobile page (referenced from another mobile page) via Ajax unless special attribute is specified
Scenario 1: Multiple jQM pages in a HTML document
This is the most simple and common scenario; multiple jQM pages within a document. The following diagram shows how a document is initially loaded and how a mobile page is retrieved from an user interaction:
Mobile browser retrieves the whole document from the server and loads it. Since it is HTTP document request, any code within <script> tags are executed, the first mobile page is automatically initialised, pageinit event triggered and rendered (Definition 3). Then the user clicks on menu #B, jQM interprets href=’#B’. Since this is an anchor reference, it indicates that the target mobile page is from the same document. The framework locates the mobile page from the current DOM by matching id value, then the page is initialised and rendered which also triggers #B pageinit event. Finally, once the page is rendered, jQM performs animated page transition for page B.
Scenario 2: Multiple jQM pages in separate HTML documents
This is another common scenario for linking pages in separate HTML documents.
The index.html document contains a mobile page with 2 menus pointing to A.html and B.html. When the mobile browser loads it, it executes the code within <script> tag and automatically displays the first and only mobile page. Then the user clicks on menu B which refers to B.html (href=’B.html’). Since we are building a mobile page referring to another mobile page in separate HTML document, we need to add an extra attribute ‘data-ajax=false’ (or data-rel=’external’ if cross domain) inside the menu page header. This attribute tells jQM to issue a normal HTTP request to load B.html. At this point, the user has no control over the web interface. It’s just a loading busy icon waiting for B.html to arrive. When the document arrives, browser load the HTML file as normal; <script> is executed, B1 page is automatically initialised and rendered for display and also #B1 pageinit event is triggered. Since the DOM tree is completely rebuilt from HTTP request, there is no page transition.
In the next part, we use this concept to extend to different scenarios.