Skip to content

December 2, 2012

jQuery Mobile: The Concept of Linking Mobile Pages (1)

by Joe Kuan

It took me a while to grasp the concept of linking pages in jQuery Mobile (jQM). I must say it was a little bit awkward to start with. However, it soon becomes clear to me that this is actually very simple and light design. This article is to illustrate such concept, not a guide to show you how you should organise jQM pages. Also by understanding this concept, hopefully it helps you to design your web application with fluid user experience and less confused on attaching JavaScript code with mobile page. Before we talk about how mobile pages referring to each other,  assume we all know the jQuery Mobile syntax and the following conditions:

  1. a jQM page is bounded by a <div> box with data-role=’page’ attribute (based on custom data attributes - HTML 5 standard)
  2. more than one jQM page can be defined in a HTML document
  3. the first jQM page is always loaded and rendered if the HTML document is loaded through sync. HTTP request, i.e not Ajax (async)
  4. a jQM page can be loaded via HTTP request or Ajax (xmlHttpRequest) request
  5. 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:

Navigation of multiple mobile pages within a document

Navigation of multiple mobile pages within a document

Assume we have an index.html document with 3 mobile pages defined; the first page contain 2 menus pointing to two other pages with anchor reference #A and #B. There are <script> tags defined inside HTML <head> containing JavaScript code or files.

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.

Load another jQM page from another HTML document

Load another jQM page from separate HTML document

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.

About these ads
Read more from jQuery Mobile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

Follow

Get every new post delivered to your Inbox.

Join 34 other followers

%d bloggers like this: