Introduction to jQuery Mobile


What is jQuery Mobile?

  • Mobile framework using jQuery (obviously).
  • Aggressively 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" href="jquery.mobile.css" />
  <script src="jquery.js"></script>
  <script src="jquery.mobile.js"></script>
</head> 
<body> 

<div data-role="page">

  <div data-role="header">
    <h1>Page Title</h1>
  </div>

  <div data-role="content">  
    <p>Page content goes here.</p>    
  </div>

  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>
</body>
</html>

Virtual Pages

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    <a href="#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 href="#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 href="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 href="footer.html" class="ui-btn-active">One</a></li>
      <li><a href="footer2.html">Two</a></li>
      <li><a href="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 href="footer.html">One</a></li>
      <li><a href="footer2.html" class="ui-btn-active">Two</a></li>
      <li><a href="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 href="footer.html">One</a></li>
      <li><a href="footer2.html">Two</a></li>
      <li><a href="footer3.html" class="ui-btn-active">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" class="select">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" class="select">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 href="target.html">HTML</a></li>
  <li><a href="target.html">JavaScript</a></li>
  <li><a href="target.html">CSS</a></li>
</ul>

<h4>Ordered List View</h4>

<ol data-role="listview" data-inset="true">
  <li><a href="target.html">HTML</a></li>
  <li><a href="target.html">JavaScript</a></li>
  <li><a href="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 href="target.html">v2.2.1</a></li>
      <li><a href="target.html">v3.1.3, v3.2</a></li>
      <li><a href="target.html">v4.0</a></li>
    </ul>
  </li>
  <li>
    Android
    <ul data-role="listview" data-inset="true">
      <li><a href="target.html">v1.5, v1.6</a></li>
      <li><a href="target.html">v2.1</a></li>
      <li><a href="target.html">v2.2</a></li>
    </ul>
  </li>
  <li>
    Windows Mobile
    <ul data-role="listview" data-inset="true">
      <li><a href="target.html">v6.1</a></li>
      <li><a href="target.html">v6.5.1</a></li>
      <li><a href="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 href="target.html">HTML</a></li>
  <li><a href="target.html">JavaScript</a></li>
  <li><a href="target.html">CSS</a></li>
</ul>

<h4>Split Button List View</h4>

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

<h4>Thumbnail List View</h4>

<ul data-role="listview">
  <li>
    <a href="target.html">
      <img src="thumbnail1.jpg" />
      <h3>Miles Davis</h3>
      <p>Kind of Blue<p>
    </a>
  </li>
  <li>
    <a href="target.html">
      <img src="thumbnail2.jpg" />
      <h3>Cannonball Adderley</h3>
      <p>Somethin' Else</p>
    </a>
  </li>
  <li>
    <a href="target.html">
      <img src="thumbnail3.jpg" />
      <h3>Charles Mingus</h3>
      <p>The Black Saint and the Sinner Lady</p>
    </a>
  </li>
</ul>

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.
Advertisements

One thought on “Introduction to jQuery Mobile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s