Multiple Pages in jQuery Mobile

Continuing from previous example, today we will look at how to create multiple pages in jQuery mobile.

 

Creating multiple pages is as easy as creating single page. So, basically jQuery mobile uses div or section with data-role= "page" with unique id tag to identify and render a page and then you can link multiple pages by creating multiple divs or sections in one HTML file.

You don't have to keep all your pages in single HTML file if you don't want to. There are two different ways jQuery mobile handle multiple page:

  1. Separating sections with data-role page in single HTML file
  2. Separate HTML files for each page, in this case jQuery mobile automatically load content of page using AJAX

In this article, we will see how single HTML file works and then in next one we will take AJAX based multiple page.

Let's see code first and then we will go over the details:

 

<!doctype html>

<html>

    <head>

        <title>JQM Application</title>

        <link rel="stylesheet" href="res/jquery.mobile.css" />

        <script type="text/javascript" src="res/jquery-1.7.1.js"></script>

        <script type="text/javascript" src="res/jquery.mobile.js"></script>

    </head>

    <body>

        <section id="page1" data-role="page">

            <header data-role="header">

                <h1>JQM Test</h1>

            </header>

            <div class="content" data-role="content">

                <p>First Page</p>

                <p><a href="#page2">Go to the second page!</a></p>

            </div>

            <footer data-role="footer" data-position="fixed">

                <h1>© Copyrights</h1>

            </footer>

        </section>

        <section id="page2" data-role="page">

            <header data-role="header">

                <h1>Page 2</h1>

            </header>

            <div class="content" data-role="content">

                <p>Second Sample Page</p>

            </div>

            <footer data-role="footer" data-position="fixed">

                <h1>© Copyrights</h1>

            </footer>

        </section>



    </body>

</html>

 

In the code above, we have created two sections with unique ids and data-role of type page. This tells jQuery mobile that first section is going to be the home page and then to navigate to page 2 we can use old anchor technique in page1. If you load this example in browser and click on link, you will see that home page smoothly slides to next page. Well that smooth sliding transition is something jQuery mobile include for you (just like many other effects) to give page more app native feel.

There are 10 effects like slide built into the framework including none. To see effects in action add data-transition to a tag as shown below:

 

<p><a href="#page2" data-transition="pop">Go to the second page!</a></p>

 

Other values for data-transition are:

fade, flip, turn, flow, slidefade, slide, slideup, slidedown, none

Note: not all browsers support 3D transition of CSS3 so in those cases framework will fall back to default value of none.

 

 

Tags: , ,

jQuery | jQuery Mobile