jQuery Mobile: Part 2 – Making multiple pages and linking them



Hey fellas, in the first part of our jQuery Mobile journey we have learned how to make the first jQuery Mobile page. That was quite easy and fun. As we ain’t going to give those introductions again, I believe, its a good idea to have a look into the previous part.

In this part we will dig a bit more. We will see how can we make more than one pages and link to each other.

More about page:
As we are going to create pages, I think we should be clear about it first. In jQuery Mobile a page is a div (or other element) having data-role attribute with page as value. So, a HTML page may contain more than one jQuery Mobile pages (may we call ’em virtual pages?). However, each of these virtual pages may have separate header and footer sections and only one virtual page is shown at any single time.

Creating pages:

Now we will create two virtual pages in one HTML page (index.html). However, our first page is almost ready from previous blog. We will modify it a bit more to suite our need on this part. The modified version is:

<div data-role="page" id="page1">
    <div data-role="header">
        <h6>Welcome...</h6>
    </div>
    <div data-role="content">
        <a href="#page2">Go to Page 2</a>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>

    </div>
</div>

Notice the changes in line 10 and 15. In line 10, we have added a new attribute id with “page1” as value. We’ve deleted the home and back icon from header section too. Then, we have modified the content section and added a anchor with href to “page2“, which we gonna create in a little while. Our modified first page now looks like: Let’s create another virtual page in the same HTML file. We will inject the following markup after the page block in the above code (that is below the </div> tag).

<div data-role="page" id="page2">
    <div data-role="header">
        <a href="index.html" data-icon="home">Home</a>
        <h6>2nd Page</h6>
        <a data-rel="back" data-icon="back">Go back</a>
    </div>
    <div data-role="content">
        <a href="#page1">Return to Page 1</a>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>

    </div>
</div>

The second virtual page is now created in the same HTML file (index.html). If you already noticed, you see id=”page2″ for this virtual page. Using this id we are going to identify this page. Let’s have a look of this page: Linking to each other (virtual pages):

Please look at the both virtual pages above. There is one anchor tag in each virtual page. In the page 1 (id=page1), it is:

<a href="#page2">Go to Page 2</a>

and in the page 2 (id=page2) it is:

<a href="#page1">Return to Page 1</a>

In the first anchor tag, we have set href attribute with value “#page2″. It tells jQuery Mobile to load a virtual page with id=”page2”. So, when you click on the anchor text “Go to Page 2″ it actually loads the other virtual page (page2). In the same way, we’ve created an anchor tag in the 2nd page which references to our first virtual page with id=”page1”. When you click on “Return to Page 1” it will take back you to the first page.

Linking to External File

So far, we’v seen how to link to virtual pages inside a single HTML file. Now we will see linking separate HTML files. It is just like old anchor tag. That’s just mentioning the filename in the href attribute. Let’s say, we have created a second HTML file named “list.html” with the following markup inside.

<div data-role="page" id="list">
    <div data-role="header">
        <a href="index.html" data-icon="home">Home</a>
        <h6>Listing Page</h6>
        <a data-rel="back" data-icon="back">Go back</a>
    </div>
    <div data-role="content">
        <a href="index.html">Return to Page 1</a>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>

    </div>
</div>

Now, we need to link to this page from our page1. So, we append the following line in the content section of page1 (in index.html).

<a href="list.html">Listing Page</a>

Here, the anchor tag says jQuery Mobile to load the external file list.html. From list.html, we again linked back index.html using same way. Nothing new here to explain! Here is preview:

Putting them altogether

Here is the full codes that we’ve seen just above:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-role="header">
        <h6>Welcome...</h6>
    </div>
    <div data-role="content">
        <a href="#page2">Go to Page 2</a>
        <p><a href="list.html">Listing Page</a></p>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
        <a href="index.html" data-icon="home">Home</a>
        <h6>2nd Page</h6>
        <a data-rel="back" data-icon="back">Go back</a>
    </div>
    <div data-role="content">
        <a href="#page1">Return to Page 1</a>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>
    </div>
</div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="list">
    <div data-role="header">
        <a href="index.html" data-icon="home">Home</a>
        <h6>Listing Page</h6>
        <a data-rel="back" data-icon="back">Go back</a>
    </div>
    <div data-role="content">
        <a href="index.html">Return to Page 1</a>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>
    </div>
</div>
</body>
</html>
  • Vijeta

    As known, this works only if the html with multi pages is the first page. For consecutive pages only the first data-role=page is loaded.

    http://jquerymobile.com/test/docs/pages/page-links.html
    Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.

    Have you ever used the plugin : https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget ?
    I was unable to get this working too.

  • WebDesigning CompanyinChennai

    Wow Really very useful information.

    Thanks a lot for sharing it with us. I will look forward to read more from you.

    Could I share this information on my site.

    Web Designing company in Chennai