Create Multiple jQuery Mobile Pages and Link them - Part 2

In my previous post about Writing your first jQuery Mobile app - Part 1, I have explained about creating single page, changing themes and creating navigation button. And in this post, we will see more about pages, creating single page template and multiple page template.

What are "Pages"?

A Page in jQuery Mobile is nothing but a container created within a <div data-role="page"> that is displayed on the screen. It can contain the header, the page content, and the footer. The jQuery Mobile application can have individual HTML files each representing a single page, or it can have single HTML file containing multiple pages div containers within it. You can place widgets and embed controls within page.

Single Page Template

Single-page template means create individual pages for every HTML file. Where every HTML file will have its own page container created using <div data-role="page">. So we shall create two individual HTML file named "index.html" and "Next.html" and link them using navigation buttons.

So below is the body of "index.html". For the head sections and referencing jQuery mobile read Part 1.

<div data-role="page">
    <div data-role="header" data-theme='b'>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is index.html.</p>
      <a href="next.html" data-role="button">Go to Next.html</a>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Footer</h1>
    </div>
</div>

The button to move to "Next.html" page is placed in content section and applied "data-role=button" to let jQuery mobile know that this is a button element so that jQuery mobile can take necessary action for automatically enhancing and displaying. And this is how it should look.

Now, create "Next.html" and below is the body of "Next.html".

<div data-role="page">
    <div data-role="header" data-theme='b'>
      <a href="index.html" data-icon="home">Home</a>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is Next.html. Click Home button to go to index.html</p>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Website Footer</h1>
    </div>
</div>

In this page, the button to move to "Index.html" is placed in header section and applied "data-icon=home" to display home icon. And this is how it should look.

Now when you run this app, index.html page is first loaded into the DOM. When you click on the button to open Next.html, the index.html page is hidden from view, and Next.html is displayed.

This approach has following advantages.

• Your pages are clean, small and easy to maintain.
• Your DOM size is also small.

It also has disadvantage.

• It consumes more bandwidth as each page visit generates a new request.

Remember, in single page approach declaring the <div data-role="page"> page container is optional.

Multi-Page Template

In a multi-page template, the single HTML file will have multiple pages in it which means multiple <div data-role="page">. To differentiate these pages, assign an Page ID to every div element. The page ID must be unique within your app. Later on, using Page ID we can link them together and navigate through them.

So, lets create a single HTML file named "index.html" and create multiple page within it.

<div id="page1" data-role="page">
    <div data-role="header" data-theme='b'>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is Page 1.</p>
      <a href="#page2" data-role="button">Go to Page 2</a>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Footer</h1>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="header" data-theme='b'>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is Page 2.</p>
      <a href="#page1" data-role="button">Go to Page 1</a>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Footer</h1>
    </div>
</div>

Now when you run this app, the index.html file will be loaded with all the pages and you can navigate through them via navigation buttons. This is same as like creating multiple anchor tags links within a simple HTML page.

This approach has following advantages.

• All your pages are loaded in one go so your mobile application works faster and consume less bandwidth.
• Your DOM size is also small.

It also has following disadvantage.

• This is only useful when you have small number of static pages and with minimum content.
• The DOM size is relatively large compare to single page approach.

Setting Title of Pages

With Single Page Template approach, you can easily set the title of every page because each page is separate file, but in case of Multi-Page Template, how will you set different titles for every page?

Answer is: You can use the <title> tag to set the title for the first or the main page of the multi-page template app and other pages define "data-title" attribute to set the title for particular page.

<div id="page2" data-role="page" data-title="Page 2">

More about Linking Pages

jQuery Mobile is designed to work with simple page linking conventions. We link pages as we normally would, and jQuery Mobile will automatically handle page requests. In a single-page template, it uses Ajax when possible. When Ajax isn't possible, a normal http request is used instead. That's a default behavior. However, you can disabled the ajax navigation using "data-ajax=false" attribute.

<a href="Next.html" data-role="button" data-ajax="false">Go to Next Page</a>

There are situations where Ajax transitions are not used when a request page is:

• from an external domain
• data-ajax="false" attribute is used
• rel="external" is specified
• target attribute is specified

In case of Multi-Page Template approach, Ajax navigation is by default and disabling it doesn't make any difference. The only change you will find when you disable Ajax navigation is, the default slide transition will be used to load the pages regardless of what transition you have specified in the data-transition attribute.

<a href="Next.html" data-role="button" data-ajax="false" data-transition="flip" >Go to Next Page</a>

In above code, though data-transition is set to "flip" but since Ajax navigation is turned off, it will be displayed using slide transition.

Using data-rel="back" attribute

Using data-rel="back" attribute, you can create back button behavior (as we usually do with JavaScript). It uses browser history to navigate to previous page. When both the href and data-rel="back" attributes are specified for an anchor link, then href attribute is ignored by the framework and the data-rel attribute will be considered.

Summary

In this post, you got an idea about creating Single Page Template application, Multi-Page Template application and then linking the pages within the application. Also got answers for defining titles of the pages, turning off ajax navigation and creating back button in jQuery Mobile App. In next post, I will show more about Prefetching and Caching Pages.

Feel free to contact me for any help related to jQuery, I will gladly help you.