04 - jQuery Mobile - Pages

Introduction

Web pages are the basic component of any website. jQuery Mobile makes it so easy to handle web pages. You can have a single page template or multi-page template using jQuery Mobile page structure. jQuery Mobile uses div elements to create pages, headers, content or footers you want. You can assign the role page to your div elements to make your webpage mobile optimized. You can also add headers and footers by assigning the roles header and footer and also the main content by assigning the role content to your div element.

Basic Single Page Template

In jQuery Mobile, every page is identified with a div element having the data-role attribute set to the value page. This div element needs to be added inside the <body> section obviously. You can add a header simply by adding a div element and setting the value of its data-role attribute to header. To add the main content, you can have a div element with data-role attribute having the value content. Inside the content div, you can add any valid HTML markup. If you want to add a footer to your page, add a div element with data-role attribute having the value footer.

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
      <title>Sample Code</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
   </head>
   <body>
     <div data-role="page">
       <div data-role="header" data-theme="b">
          <h1>Welcome to My First Webpage!!!</h1>
       </div>
       <div data-role="content">
          <h3>Here is a list of yummy cakes!!!</h3>
          <ul>
             <li>Black Forest Cake</li>
             <li>Chocolate Cake</li>
             <li>White Forest Cake</li>
          </ul>
       </div>
       <div data-role="footer" data-theme="b" data-position="fixed">
         <h3>Copyright All Rights Reserved</h3>
       </div>
     </div>
   </body>
</html>

Save the file as webpage.html and open it using your web browser. You will get a screen like this:

    

You could see that the footer has gone to the bottom of the screen. This is because that we have set the value of data-position attribute to fixed. If you have not set the value of data-position to fixed, then the footer will appear just below the content like this:

Multi-page Page Template

The happy news with jQuery Mobile is that you can handle multiple pages within a single HTML file. You can have multiple div elements with unique ids and having the value page for data-role attribute for different pages. Then you can internally link between these pages by using the href attribute.

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Code</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  </head>
  <body>
    <!-- Start of welcome page -->
    <div id="welcome" data-role="page">
      <div data-role="header" data-theme="b">
        <h1>Welcome to My WebSite!!!</h1>
      </div>
      <div data-role="content">
        <h2>This site is for cake lovers!!!</h2>
      </div>
      <a href="#first" data-role="button" data-theme="e">Find Cakes List</a>
      <div data-role="footer" data-theme="b">
         <h3>Copyright All Rights Reserved</h3>
      </div>
    </div>
    <!-- Start of first page -->
   <div id="first" data-role="page">
     <div data-role="header" data-theme="a">
       <h1>List of Cakes!!!</h1>
     </div>
     <div data-role="content">
       <h3>Here is a list of yummy cakes!!!</h3>
       <ul>
          <li>Black Forest Cake</li>
          <li>Chocolate Cake</li>
          <li>White Forest Cake</li>
       </ul>
       <a href="#welcome" data-role="button" data-theme="b">Back to Main Page</a>
     </div>
     <div data-role="footer" data-theme="a" data-position="fixed">
        <h3>Copyright All Rights Reserved</h3>
     </div>
    </div>
  </body>
</html>

Save the file as multipage.html and open it using your browser. You will get a screen like this:

         

If you click the button Find Cakes List, you will be redirected to the internal page with id=first and your screen will look like this:

      

 

If you analyze the code, you could find that we have a single .html file named multipage and both the pages are opened within this file. You get different colors for the header, footer and button in both the pages by assigning different themes. The links (a href) look like buttons as we have assigned the data-role to button. Like this, you can have as many pages as you want within a single HTML document.

Summary

In this section, we have seen how to create mobile optimized web pages using jQuery Mobile. We could add headers, content and footers by adding div elements and setting the value of data-role attribute to header, content and footer respectively. We have also seen how to create multipage template structure using a single HTML file. 

 

Like us on Facebook