Frontend JavaScript-based Framework: jQuery Mobile


Part Two Chapter 06

jQuery

The mobile web page will need CSS and JavaScript to take care of the presentation (visual layout) and the behavior (i.e. user interactions). We are going to implement one of the common JavaScript-based frontend frameworks, jQuery Mobile onto our mobile web pages.

Benefits of jQuery Mobile

The benefits include:

  • jQuery Mobile is fully HTML5-based and is intended for developing web pages with responsive user interfaces that can be accessed well on all devices (i.e. mobile, tablet or desktop devices).
  • jQuery Mobile makes developing mobile websites simple as it uses HTML5 and CSS3 for laying out mobile optimized web pages with minimal scripting.

How to Implement jQuery Mobile

We are going to create a simple mobile web page using jQuery mobile.

jQuery Mobile Page

Add jQuery Mobile JavaScript and CSS Files

To use jQuery Mobile, we must add the following files in the head section.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

So the codes of mobile web page will become:

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <h1>...</h1>
  <p>...</p>
</body>
</html>

Define Pages

Define your mobile web page as “page” with the “data-role” attribute.

<div data-role="page">
  ...
</div>

Define Header

Define your header section as “header” with the “data-role” attribute.

<div data-role="header">
  <h1>...</h1>
</div>

Define Navigation Menu

Define a multi-tab navigation menu in the header section of the mobile web page by specifying “navbar” in the “data-role” attribute.

  • All the tabs on the navigation menu are clickable buttons.
  • Icons are included each of the tabs. For example, the home tab is represented by the text “Home” and the “home” icon (using the “data-icon” attribute”).
<div data-role="navbar">
  <ul>
    <li><a href="https://www.mobilewebsitebook.com/" data-icon="home">Home</a></li>
    <li><a href="https://www.analyticsbook.org/" data-icon="arrow-r">Analytics Book</a></li>
    <li><a href="https://www.gordonchoi.com/" data-icon="arrow-l">Gordon Choi</a></li>
  </ul>
</div>

Define Main Content

Define your main content section as “main” with the “data-role” attribute, and specify with the “ui-content” class.

<div data-role="main" class="ui-content">
  ...
</div>

Define your footer section as “footer” with the “data-role” attribute.

<div data-role="footer">
  ...
</div>

The Final jQuery Mobile Page

Let's put the jQuery mobile web page together.

<!doctype html>
<html>
<head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Page Header</h1>
        <div data-role="navbar">
          <ul>
            <li><a href="https://www.mobilewebsitebook.com/" data-icon="home">Home</a></li>
            <li><a href="https://www.analyticsbook.org/" data-icon="arrow-r">Analytics Book</a></li>
            <li><a href="https://www.gordonchoi.com/" data-icon="arrow-l">Gordon Choi</a></li>
         </ul>
         </div>
    </div>
    <div data-role="main" class="ui-content">
      <p>Page Main Content</p>
    </div>
    <div data-role="footer">
      <p>Page Footer</p>
    </div>
  </div>
</body>
</html>


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book