Weight and health related risks.


Try it and it's free. PC and mobile version can be found on my website Healthfirst.
Android native application, named BmiScores, can be found on Google paly Store.

 

jQuery Mobile and multiple pages

In the previous jQuery mobile tutorial, I showed you how to built a single mobile page. If you missed this tutorial it can be found here. In this tutorial I'll will show you how built a simple mobile site with multiple pages. The multiple pages could be embedded in the same document or they could be in separate files. Both the cases will be illustrated in our mobile site example.

jQuery Mobile page Before jumping to the example, I would like to provide you with a short review of what is the jQuery mobile page. In the simplest words, the jQuery Mobile page is a model or structure that is optimized to support either single pages, or multiple pages within the same document. The structure of a jQuery mobile single page was showed to you in the previous tutorial get started with jQuery Mobile. The goal of this model is to allow developers to create mobile websites using best practices while creating a rich, native-like experience that can't be achieved with standard HTTP requests. Moreover, ordinary links will work fine without any special configuration. So, in jQuery Mobile, you have the combination of the two worlds.







Mobile page structure


What to include into HTML head


In order to take a full advantage of all the framework features, a jQuery mobile page, also called view, must start with an HTML5 doctype. But not all the mobile devices or smartphones browsers support HTML5. This is interesting and I know you're wondering what will be the fate of old devices? Don't worry, the older devices with browsers that don't support or understand HTML5 will safely ignore the 'doctype' and various custom attributes.


jQuery Mobile and the references order

in order to jQuery mobile to show its magic as well as it's power, some stuff are mandatory to be referenced in the head of your HTML5 document. There are 3 main things that must be referenced in the head and in the order they appear below. Remember, the order is very important.

  • 1- mobile theme CSS
  • 2 - jQuery Mobile
  • 3- jQuery (this is jQuery Core)
Note: Always check for the latest versions.

How to set references to mobile CSS, jQuery and jQuery Mobile


There are two ways to add references to CSS mobile, jQuery and jQuery Mobile in the head of your document. The first way consists in adding references to them directly from the website where they are hosted. The second way consists in downloading them and reference them locally. Personally, I use the first method. But the choice is yours. Now we are ready to build our first mobile site which will be composed with multiple pages.




<!DOCTYPE html>
<html>
<head>
<title>Website with multiple pages</title>
<!-- the meta "viewport" tag sets the screen width to the pixel width of the device  -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- the line below refernces the jQuery mobile css (Cascading Stylesheet) -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<!-- the line below refernces the jQuery core library -->
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<!-- the line below refernces the jQuery mobile library -->
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>
<body>

   
<!-- Start of home page which is the first page -->

   
<div data-role="page" id="home">
        
<div data-role="header">
       
<h1>Home</h1>
       
</div><!-- /header -->

       
<div data-role="content">      
           
<p>I'm first in the source order so I'm shown as the page.</p> 
           
<p>Welcome to my home page </p>
          
<p>Any stuff that will appears in the home page body must be added here.
                 You can add any HTML code, images or anything that the ordinary
                 web pages support
          
</p>

          
<p>In the Home page, the navigation bar is added to the
              page footer. The navigation bar enables you to switch
              between the pages or screens.
           
</p>

           
<p>There are several ways to view the internal or external
               pages. In this example. I'm using the navigation bar
               and the traditional links. The navigation bar is shown
               in the footer of this page while the traditional link
               are shown below
          
</p>

         
<p>View internal page called
           
<a href="#products">Products</a></p>

          
<p>View internal page called
            
<a href="#aboutus">About us</a></p>


       
</div><!-- /content -->

       
<div data-role="footer">
           
<h4>Home page Footer with navigation bar</h4>
           
<!-- Start of navigation bar -->
           
<div data-role="navbar">
               
<ul>
                   
<li><a href="#home">Home</a></li>
                   
<li><a href="#products">Products</a></li>
                   
<li><a href="#aboutus">About us</a></li>
               
</ul>
          
</div><!-- end of navigation bar -->

       
</div><!-- /footer -->
</div><!-- end of first page which is home page -->



<!-- Start of products page which is second page -->

<div data-role="page" id="products">

       
<div data-role="header">
       
<h1>products</h1>
       
<!-- Start of navigation bar -->
       
<div data-role="navbar">
           
<ul>
               
<li><a href="#home">Home</a></li>
               
<li><a href="#products">Products</a></li>
               
<li><a href="#aboutus">About us</a></li>
           
</ul>
       
</div><!-- end of navigation bar -->

       
</div><!-- end of header -->

       
<div data-role="content">      
           
<p>Our newest products are shown in the list way</p>
           
<p>Below is the list of our newest products. The products
               are displayed into a listview using List divider
           
</p>

       
<p><!-- Listview with list divider start -->

       
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
       
<li data-role="list-divider">Fruit Products</li>
           
<li> Banana and Orange Jus </li>
           
<li> Orange and Apple Jus </li>
           
<li> Mago and grappes Jus </li>
           
<li> Another Banana and Orange Jus </li>
           
<li> Another Mago and grappes Jus </li>

       
<li data-role="list-divider">Seafood Products</li>
           
<li> Sardines Machoui </li>
           
<li> Red snaper Filet </li>
           
<li> Dorade in Tomato</li>

       
<li data-role="list-divider">Other Products</li>
           
<li> Fill the product1 </li>
           
<li> Fill the product2 </li>
           
<li> Fill the product3 </li>
           
<li> Fill the product4 </li>

       
</ul></p>

       
<p>In the products page, the navigation bar is added to the
           page header. The navigation bar enables you to switch
           between the pages or screens.
       
</p>

       
<p>There are several ways to view the internal or external
           pages. In this example. I'm using the navigation bar and
           the traditional links you can also use the buttons. The
           navigation bar is shown in the footer of this page while
           the traditional link are shown below
</p>

       
<p>View internal page called <a href="#home">Home</a></p>
       
<p>View internal page called <a href="#aboutus">About us</a> 
        </p>

        
       
</div><!-- /content -->

       
<div data-role="footer">
               
<h4>Selling only the best products</h4>
       
</div><!-- /footer -->
</div><!-- end of page products -->



<!-- Start of About us page which is third page -->

<div data-role="page" id="aboutus">

       
<div data-role="header">
           
<h1>About us</h1>

           
<div data-role="navbar">
               
<ul>
                   
<li><a href="#home">Home</a></li>
                   
<li><a href="#products">Products</a></li>
                   
<li><a href="#aboutus">About us</a></li>
               
</ul>
           
</div><!-- /navbar -->

        
</div><!-- /header -->

       
<div data-role="content">      
           
<p>In the About us page, the navigation bar is added to
               the page header. The navigation bar enables you to
               switch between the pages or screens.
           
</p>

           
<p>There are several ways to view the internal or external
               pages. In this example. I'm using the navigation bar
               and the traditional links you can also use the buttons
               and other gadgets. The navigation bar is shown in the
               footer of this page while the traditional link are
               shown below
          
</p>

    
<p>View internal page called <a href="#home">Home</a></p>
    
<p>View internal page called <a href="#products">Products</a></p>

       
</div><!-- /content -->

       
<div data-role="footer">
               
<h4>Contact us for information</h4>
       
</div><!-- /footer -->
</div><!-- /end of page aboutus -->

</body>
</html> 







The above example will work on several mobile device such as Android devices, iPhone, iPad and others. To test this example do the following:

  • Copy the above code and paste it in any text editor such as notepad.
  • Save the file as index.html or any name you wish to give it, but with .html extension.
  • Open it in the browser of your choice such as Google Chrome, Firefox, Internet explorer and so on.

Important Note: JQuery mobile linking pages


Since jQuery Mobile using the hash to track navigation history for all the Ajax pages, it's not currently possible to deep link to an anchor such as products.html#aplle on a page in jQuery Mobile, because the framework will look for a page with an ID of #apple instead of the native behavior of scrolling to the content with that ID. To link to a page containing multiple internal pages use the following syntax. Note the existence of rel="external". This and other stuff will be explained in detail in the next tutorial. For example to link to a document with multi-pages named multipage.html do it as below.

<a href="multipage.html" rel="external" >Multi-page link </a>


In the next tutorial, I'll deal with the following topics:

  • Different aspects of linking to pages.
  • Page transition effects.
  • Adding default and custom icons to different widgets in jQuery Mobile.
  • And other interesting stuff as needed.
So visit again soon.

This concludes the today's tutorial and I hope it helps you.