Introduction to

jQuery Mobile

What is jQuery Mobile?

Targeted Platforms

Basic Page Elements

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

Form Elements

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?

New Events!

New Functions!

Responsive Layout HTML Classes

Now What?

If you're interested...