Introduction to

jQuery Mobile

Mark Dalgleish - @markdalgleish

What is jQuery Mobile?

Mobile framework using jQuery (obviously).
Aggresively cross-browser, cross-platform.
Create web apps that feel as close to native as possible.
Markup driven, minimal code required to get up and running.
Focused on progressive enhancement, graceful degradation.

Targeted Platforms

iOS, Android, Windows Mobile
Blackberry, Symbian, webOS
Firefox Mobile (Fennec), Opera Mobile / Mini
Meego, bada, Maemo...
Phonegap!

Basic Page Elements

Custom elements declared using DIVs with 'data-role' attributes
At least one 'data-role="page"' element.
Inside the page, at least one 'data-role="content"' element.
Classes are added automatically.
Form elements and lists are automatically enhanced.

Basic Page Markup

<!doctype html> 
<html> 
  <head> 
  <title>Page Title</title> 
  <link rel="stylesheet" class="jquery.mobile.css" />
  <script src="/img/spacer.gif">

Virtual Pages

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    <a class="#page2" data-role="button">Go to Page 2</a>
  </div>
</div>

<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div data-role="content">
    <a class="#page1" data-role="button">Go to Page 1</a>  
  </div>
</div>

Separate Pages with AJAX Loading

<div data-role="page">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    <a class="page2.html" data-role="button">Go to Page 2</a>
  </div>
</div>

Fixed Footer Navigation

<div data-role="footer" data-id="myfooter" data-position="fixed">
  <div data-role="navbar">
    <ul>
      <li><a class="footer.html">One</a></li>
      <li><a class="footer2.html">Two</a></li>
      <li><a class="footer3.html">Three</a></li>
    </ul>
  </div>
</div>

// Second page
<div data-role="footer" data-id="myfooter" data-position="fixed">
  <div data-role="navbar">
    <ul>
      <li><a class="footer.html">One</a></li>
      <li><a class="footer2.html">Two</a></li>
      <li><a class="footer3.html">Three</a></li>
    </ul>
  </div>
</div>

// Third page
<div data-role="footer" data-id="myfooter" data-position="fixed">
  <div data-role="navbar">
    <ul>
      <li><a class="footer.html">One</a></li>
      <li><a class="footer2.html">Two</a></li>
      <li><a class="footer3.html">Three</a></li>
    </ul>
  </div>
</div>

AJAX Loading In Depth

Every page must fit the jQuery Mobile standard.
Pages are injected into the DOM with a transition if AJAX is supported, otherwise a regular page load occurs.
If the page fails to load, the user receives a friendly, themed error message.
When linking to a non-mobile page on the same domain, use rel="external".
Links to different domains are detected automatically, triggering a regular load.

Form Elements

Regular form elements are automatically enhanced for mobile usability.
All controls gracefully degrade to their native equivalents.
Default settings can be changed to meet your needs.

Form Element Markup

<div data-role="fieldcontain"> 
  <label for="textbox">Textbox:</label> 
  <input type="text" name="textbox" id="textbox" value=""  /> 
</div>

<div data-role="fieldcontain"> 
  <label for="textarea">Textarea:</label> 
  <textarea name="textarea" id="textarea" value=""></textarea>
</div>

<div data-role="fieldcontain"> 
  <label for="search">Search:</label> 
  <input type="search" name="search" id="search" value=""  /> 
</div>

<div data-role="fieldcontain"> 
  <label for="slider">Slider:</label> 
  <select name="slider" id="slider" data-role="slider"> 
    <option value="0">Off</option>
    <option value="1">On</option>
  </select>
</div>

<div data-role="fieldcontain"> 
  <label for="range">Range:</label>
  <input type="range" name="range" value="0" min="0" max="10" /> 
</div>

<div data-role="fieldcontain"> 
  <fieldset data-role="controlgroup"> 
    <legend>Checklist:</legend>
    <input type="checkbox" name="checkbox1" id="checkbox1" /> 
    <label for="checkbox1">HTML</label> 

    <input type="checkbox" name="checkbox2" id="checkbox2" /> 
    <label for="checkbox2">CSS</label> 

    <input type="checkbox" name="checkbox3" id="checkbox3" /> 
    <label for="checkbox3">JavaScript</label>
  </fieldset>
</div>

<div data-role="fieldcontain"> 
  <fieldset data-role="controlgroup" data-type="horizontal"> 
    <legend>Horizontal Checklist:</legend>
    <input type="checkbox" name="checkbox4" id="checkbox4" /> 
    <label for="checkbox4">Tea</label>

    <input type="checkbox" name="checkbox5" id="checkbox5" /> 
    <label for="checkbox5">Coffee</label>
  </fieldset> 
</div>

<div data-role="fieldcontain"> 
  <fieldset data-role="controlgroup">
    <legend>Radio Buttons:</legend>
      <input type="radio" name="radio1" id="radio1a" value="a" /> 
      <label for="radio1a">HTML5</label>

      <input type="radio" name="radio1" id="radio1b" value="b" /> 
      <label for="radio1b">Flash</label>

      <input type="radio" name="radio1" id="radio1c" value="c" /> 
      <label for="radio1c">Silverlight</label>
  </fieldset>
</div>

<div data-role="fieldcontain"> 
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal Radio Buttons:</legend>
      <input type="radio" name="radio2" id="radio2a" value="a" /> 
      <label for="radio2a">Tea</label>

      <input type="radio" name="radio2" id="radio2b" value="b" /> 
      <label for="radio2b">Coffee</label>
  </fieldset>
</div>

<div data-role="fieldcontain">
  <label for="select1">Standard Select:</label>
  <select name="select1" id="select1">
    <option value="1">HTML5</option>
    <option value="2">Flash</option>
    <option value="3">Silverlight</option>
  </select>
</div>

<div data-role="fieldcontain">
  <label for="select2">Custom Select:</label>
  <select name="select2" id="select2" data-native-menu="false">
    <option value="1">HTML5</option>
    <option value="2">Flash</option>
    <option value="3">Silverlight</option>
  </select>
</div>

<button name="button" name="button">Button</button>
<button type="submit" name="submit">Submit</button>

List View Markup

<h4>Basic List View</h4>

<ul data-role="listview" data-inset="true">
  <li>HTML</li>
  <li>JavaScript</li>
  <li>CSS</li>
</ul>

<h4>Linked List View</h4>

<ul data-role="listview" data-inset="true">
  <li><a class="target.html">HTML</a></li>
  <li><a class="target.html">JavaScript</a></li>
  <li><a class="target.html">CSS</a></li>
</ul>

<h4>Ordered List View</h4>

<ol data-role="listview" data-inset="true">
  <li><a class="target.html">HTML</a></li>
  <li><a class="target.html">JavaScript</a></li>
  <li><a class="target.html">CSS</a></li>
</ol>

<h4>Nested List View</h4>

<ul data-role="listview" data-inset="true">
  <li>
    iOS
    <ul data-role="listview" data-inset="true">
      <li><a class="target.html">v2.2.1</a></li>
      <li><a class="target.html">v3.1.3, v3.2</a></li>
      <li><a class="target.html">v4.0</a></li>
    </ul>
  </li>
  <li>
    Android
    <ul data-role="listview" data-inset="true">
      <li><a class="target.html">v1.5, v1.6</a></li>
      <li><a class="target.html">v2.1</a></li>
      <li><a class="target.html">v2.2</a></li>
    </ul>
  </li>
  <li>
    Windows Mobile
    <ul data-role="listview" data-inset="true">
      <li><a class="target.html">v6.1</a></li>
      <li><a class="target.html">v6.5.1</a></li>
      <li><a class="target.html">v7.0</a></li>
    </ul>
  </li>
</ul>

<h4>Searchable List View</h4>

<ul data-role="listview" data-inset="true" data-filter="true">
  <li><a class="target.html">HTML</a></li>
  <li><a class="target.html">JavaScript</a></li>
  <li><a class="target.html">CSS</a></li>
</ul>

<h4>Split Button List View</h4>

<ul data-role="listview" data-inset="true">
  <li>
    <a class="target.html">HTML</a>
    <a class="options.html" data-icon="gear">Options</a>
  </li>
  <li>
    <a class="target.html">JavaScript</a>
    <a class="options.html" data-icon="gear">Options</a>
  </li>
  <li>
    <a class="target.html">CSS</a>
    <a class="options.html" data-icon="gear">Options</a>
  </li>
</ul>

<h4>Thumbnail List View</h4>

<ul data-role="listview">
  <li>
    <a class="target.html">
      <img src="/img/spacer.gif">

So where's the JavaScript?

Oh yeah, I almost forgot.

New Events!

User events: tap, taphold, swipe, swipeleft, swiperight, orientationchange, scrollstart, scrollstop.
Page events: pagebeforeshow, pagebeforehide, pageshow, pagehide.
$(document).ready()?: pagebeforecreate, pagecreate.

New Functions!

$.mobile.changePage(options)
$.fn.listview(), $.fn.selectmenu() etc...
$.fn.listview('refresh'), $.fn.selectmenu('refresh') etc...
$.fn.jqmData(), $.fn.jqmRemoveData(), and $.fn.jqmHasData()
$.mobile.pageLoading(bool)
Show or, if bool is false, hide loading indicator.
$.mobile.silentScroll(y)
$.mobile.media() - Run cross-browser media queries!

Responsive Layout HTML Classes

.portrait and .landscape classes.
.min-width-x and .max-width-x classes
(x == 320, 480, 768 and 1024)
Create custom width breakpoints with $.mobile.addResolutionBreakpoints()

Now What?

I haven't covered everything, so...
Go read the full API docs at jquerymobile.com.
Grab a copy and try it for yourself.
Follow @jquerymobile to keep up with developments.
Slides are available online at markdalgleish.com/presentations/jquerymobile

If you're interested...

This presentation was made with my new jQuery plugin, Fathom.js
Code is available on GitHub at github.com/markdalgleish/fathom
Project page is up at markdalgleish.com/projects/fathom
Give it a try and let me know what you think!