CHAPTER 12 - jQuery Mobile Tutorial (Basic)

In the previous few chapters, we introduced all of the EZoApp components. Though you can create many apps just by using components, if you want to create more powerful apps, using components alone does not seem to be adequate. Therefore, in the following chapters, we will start to introduce some programming techniques. Hopefully, you will grasp the how-tos of writing code after reading these chapters.

We will start with jQuery Mobile. After all, jQuery Mobile is one of the core features of EZoApp.

Mastering jQuery Mobile will at least enable you to create most apps. You might feel a little familiar with the code that we will talk about next because we showed it before in Chapter 4 - jQuery Mobile Components. In chapter 4, the code was generated automatically while adding components, but we will now write the code manually to create the components.

If you want to learn more about jQuery Mobile, you can visit the jQuery Mobile official website. jQuery Mobile code covered in this chapter:

page	button	grid	Input	theme
header & footer	navbar	radio-button	checkbox	flip-switch
list-view	table

1. What is jQuery Mobile?

Most web APIs in the past are not suitable for mobile devices. They either have too big a screen size or are too complicated and thus slow to load. They might even cause display errors because their browsing methods are not suitable for mobile devices. Therefore, jQuery introduced a new set of libraries- jQuery Mobile. (To learn more about jQuery, go to: W3school jQuery Tutorial)

Simply speaking, jQuery Mobile hopes to unify the user interface systems of major commercial mobile devices. It is a flexible and thematic lightweight library that aims to gain support from browsers running on various mobile devices just like on desktop browsers. Furthermore, it was designed to provide webpage operating experiences close to that of native applications.

jQuery Mobile has the following characteristics:

Uses jQuery as its core
Lightweight files
HTML5 Markup-driven
Automatically switch layouts
Supports mouse and touch events
WAI-ARIA
Powerful theme system
ASP.NET MVC support
Support most commercially available mobile devices
Consistent screen
Diversified UI

2. First Things to Know about jQuery Mobile

A jQuery Mobile structure will usually preload two JavaScript and one CSS files. They are jquery.min.js, jquery.mobile.min.js, and jquery.mobile.min.css. Don't worry; EZoApp had already preloaded them for you

<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>

The JS preloads are placed in the head section of the HTML. The HTML body consists of several individual "page"s (imaging switching the pages on a cellphone). Every page usually contains three div blocks of header, footer, and ui-content. The contents of the page are usually placed inside the div block ui-content.

<head>
  <title>jQuery Mobile</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.css">
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.js"></script>
</head>
<body>
  <div data-role="page">  // page
    <div data-role="header">  // header
      <h1>header</h1>
    </div>
    <div class="ui-content">  // ui-content
      <p>content</p>
    </div>
    <div data-role="footer">  // footer
      <h4>footer</h4>
    </div>
  </div>
</body>

3. page

A jQuery Mobile usually will have multiple pages. However, even though there are multiple pages, only one page will be displayed at a time. Pages are identified by their ids. (ids cannot be duplicated.)

<div id="page1" data-role="page">
  <div role="main" class="ui-content"></div>
</div>
<div id="page2" data-role="page">
  <div role="main" class="ui-content"></div>
</div>
<div id="page3" data-role="page">
  <div role="main" class="ui-content"></div>
</div>

To switch between pages, you can use href to switch directly to the specified page id. You can also use data-transition to set a transition effect or set data-rel="back" to return with the same effect. page has the following transition effects: (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5744498495717376)

default: default (fade)
fade: fade in, fade out (default)
flip: turn over
flow: flowing effect
pop: popup window display
slide: left-right slide
slidefade: left-right slide + fade in, fade out
slideup: slide down from the top
slidedown: slide up from the bottom
turn: turn to next page
none: no transition; switch directly

4. button

There are two types of buttons: one is created by using a, the other created by using button directly. Both ways must include class="ui-btn".

<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>

To arrange buttons horizontally:

<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>

Use class to create buttons: (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5179018739449856):

<button class="ui-btn ui-btn-icon-left ui-icon-action">action</button>
<button class="ui-btn ui-btn-icon-left ui-icon-alert">alert</button>
<button class="ui-btn ui-btn-icon-up ui-icon-arrow-d">arrow-d</button>
<button class="ui-btn ui-btn-icon-right ui-icon-arrow-d-l">arrow-d-l</button>
<button class="ui-btn ui-btn-icon-bottom ui-icon-arrow-d-r">arrow-d-r</button>
<button class="ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>

5. grid

You can create a table-like grid with div by adding class to it. A grid can contain another grid. (ui-grid-a: two cells; ui-grid-b: three cells; ui-grid-c: four cells; ui-grid-d: five cells) (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5708449694351360)

<div class="ui-grid-b">
  <div class="ui-block-a">Block A</div>
  <div class="ui-block-b">Block B</div>
  <div class="ui-block-c">Block C</div>
</div>

6. Input

This is the text input field. You can define different types of input fields, such as pure text, password, search, etc., by assigning different values to type. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=6239106661089280)

<div class="ui-field-contain">
  <label for="#text_id">Title</label>
  <input type="text" name="" id="#text_id">
</div>
<div class="ui-field-contain">
  <label for="#textarea_id">Title</label>
  <textarea name="" id="#textarea_id"></textarea>
</div>
<div class="ui-field-contain">
  <label for="#search_id">Title</label>
  <input type="search" name="" id="#search_id">
</div>

7. theme

jQuery Mobile provides us with two themes, represented by a and b. They are differentiated by class. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5684843815895040)

button：

<a href="#" class="ui-btn ui-btn-a">Theme A</a>
<a href="#" class="ui-btn ui-btn-b">Theme B</a>

navbar：

<div data-role="navbar">
  <ul>
    <li><a data-theme="a">Theme A</a></li>
    <li><a data-theme="b">Theme B</a></li>
  </ul>
</div>

8. header & footer

header and footer are common elements in the screen design of apps. jQuery Mobile uses "data attribute" to define them (for complete jQuery Mobile data attributes, refer to: http://api.jquerymobile.com/data-attribute/). Use "data-position" to define whether their positions are fixed. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5674388254883840)

<div data-role="header" data-position="fixed">
  <h1>header</h1>
</div>

<div data-role="footer" data-position="fixed">
  <h4>footer</h4>
</div>

A navigation bar menu has only five fields in a row, basically. More than five fields would make it hard to hit on a cell phone. Therefore, it will have no more than five fields in a row. If there are more than five fields, they will be arranged as two fields in a row. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5121893862473728)

<div data-role="navbar">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
  </ul>
</div>

10. radio-button

This is the "single-choice" button. In jQuery Mobile, if the choices are arranged vertically (data-type="vertical"), they will be displayed as clickable circles; if they are arranged horizontally (data-type="horizontal"), they will look like rectangular buttons. If more than one item can be selected at the same time, check to see if they use the same name; duplicate names would make multiple choices possible. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5734958769373184)

<form>
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal:</legend>
    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
    <label for="radio-choice-h-2a">One</label>
    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
    <label for="radio-choice-h-2b">Two</label>
    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
    <label for="radio-choice-h-2c">Three</label>
  </fieldset>
</form>

11. checkbox

This is the "multiple-choice" button. In jQuery Mobile, if the choices are arranged vertically (data-type="vertical"), they will be displayed as small clickable squares; if they are arranged horizontally (data-type="horizontal"), they will look like rectangular buttons. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5752591019409408)

<form>
  <fieldset data-role="controlgroup">
    <legend>Vertical:</legend>
    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
    <label for="checkbox-v-2a">One</label>
    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
    <label for="checkbox-v-2b">Two</label>
    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
    <label for="checkbox-v-2c">Three</label>
  </fieldset>
</form>

12. flip-switch

This is a switch button. Looking directly at its code, you can discover that it basically uses the concept of select. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=6247793769316352)

<form>
  <label for="flip-2">Flip toggle switch:</label>
  <select name="flip-2" id="flip-2" data-role="flipswitch" data-theme="b">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select>
</form>

13. list-view

A list equivalent to the ul and li in HTML. If a li is set to data-role="list-divider", it will become a heading-like divider symbol. Other than that, a list can also use the filter function to add a field similar to a search box at its top. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5709117897310208)

<ul data-role="listview" data-inset="true" data-divider-theme="a" data-filter="true">
  <li data-role="list-divider">Mail</li>
  <li>
    <a href="#">Inbox</a>
  </li>
  <li>
    <a href="#">Outbox</a>
  </li>
  <li data-role="list-divider">Contacts</li>
  <li>
    <a href="#">Friends</a>
  </li>
  <li>
    <a href="#">Work</a>
  </li>
</ul>

14. table

In contrast to a regular table, jQuery Mobile has designed a button to click to quickly browse the columns. The button can be added by setting data-mode="columntoggle". (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5749505286733824)

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
  <thead>
    內容省略
  </thead>
  <tbody>
    內容省略
  </tbody>
</table>

Continue reading CHAPTER 13 - jQuery Mobile Tutorial (Events)
Or Return to Table of Contents

Chapter 12 - jQuery Mobile Tutorial (Basic)