Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome or Safari browser. Firefox 10 (to be released soon) will also handle it.


Rapid Mobile Development Made Easy

Project Sponsors

Survey

Agenda

  1. State of the Mobile Web
  2. jQuery Mobile Goals & Approach
  3. Overview
  4. Examples

State of the Mobile Web

Apple iOS Platform

Google Android Platform

Other Devices

Global Mobile Browser Usage for 2011

MobileiOS + Android

jQuery Mobile Goals

Unified Mobile Experience

Accessibility

  • Aria attributes
  • Works without javascript
  • Clean semantic HTML5
  • Friendly URL structure

Themeable

  • Default Themes
  • Theme Roller
  • Adobe Fireworks Theme Templates

Getting Started




jQuery Mobile

Data Attributes

Data Attributes

Button

data-role="button"

Collapsible

data-role="collapsible"

Collapsible Set

data-role="collapsible-set"

Content

data-role="content"

Dialog

data-role="page" with data-rel="dialog"

Field container

data-role="fieldcontain"

Flip Toggle Switch

data-role="slider"

Footer

data-role="footer"

Header

data-role="header"

Listview

data-role="listview"

Navbar

data-role="navbar"

Page

data-role="page"

Pages

Basic Page Structure

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="home">
      <div data-role="header">
        <h1>Header</h1>
      </div>
      <div data-role="content">
        <p>Content goes here</p>
      </div>
      <div data-role="footer">
        <h4>Footer</h4>
      </div>
    </div>
  </body>
</html>

Basic Page layout

<div data-role="page" id="home">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  <div data-role="content">
    <p>Content goes here</p>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

Linking Pages

Default functionary is to have Ajax load the page


Internal page linking

<a href = “#foo”>Link to foo page</a>
<a href = “foo.html”>Link to foo page</a> 

Overriding

rel="external"
data-ajax="false"

Dialogs

data-rel="dialog"

Dialog vs Page

Dialogs are not put into the URL history while pages are put into the URL history.


Page Features

Page Transitions

Grids

Collapsible Content

Lists

Basic List

<ul data-role="listview" data-theme="g">
  <li><a href="acura.html">Acura</a></li>
  <li><a href="audi.html">Audi</a></li>
  <li><a href="bmw.html">BMW</a></li>
</ul> 

Features

  • List Dividers data-role="list-divider"
  • Count Bubbles ui-li-count
  • Thumbnails
  • Icons ui-li-icon
  • Content formatting
  • Search Filter data-filter="true"
  • Inset data-inset="true"
  • Nesting (just nest another UL)

Types of Lists

UI Elements

Toolbars

  • Header Bars
  • Footer Bars
  • Nav Bars

Tips

  • Fixed Position
    data-position="fixed"
  • Fullscreen Position
    data-fullscreen="true"
  • Persistent Footer
    data-id="myfooter"
    Add the data-id attribute to the footer of all relevant pages and use the same id value for each

Buttons

  • Basic
  • Basic With Icons
    data-icon="delete"
    • l-arrow, r-arrow, u-arrow, d-arrow, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, home, search
  • Inline
    data-inline="true"
  • Grouped data-role="controlgroup"
    • Vertical
    • Horizontal data-type="horizontal"
    • Icon Only

Form Elements

screen detection for all labels (display to left or above accordingly)


Text Input (handles multiple input types)

Text Area (auto grows to it's content)

Search Input

Flip Switch

Slider

- Step Based

- Horizontal Slider

Checkbox

- Vertical

- Horizontal

Radio Group

- Vertical

- Horizontal

Select

- Single

- Multi

- Custom Viewer

- Default Viewer

Button


number type="number"
email type="email"
url type="url"
tel type="tel"
time type="time"
date type="date"
month type="month"
week type="week"
datetime type="datetime "
datetime type="datetime"
local type="local"
color type="color"

Form Elements

Form Elements

Input Types

<input type="text" name="name" id="name" value="" />

TYPES password, number, email, tel, url

Other Stuff in the API

Events

Touch

tap

taphold

swipe

swipeleft

swiperight

 

Orientation Change

orientationchange

 

Scroll

Scroll Start

scroll stop


  

Virtual Mouse Events

vmouseover

vmousedown

vmouseup

vmousemove

vclick

vmousecancel

 

Page load

Page Change

Page Transition

Page Initialization

Page Remove

Themes

Default

Default Theme - Global Settings

Class Names

Default Theme - Overriding Themes

List of classes the jQuery mobile generates

Theme Roller

Fireworks

  • Graphically generate the theme & code
  • Edit the styles directly in Fireworks
  • Download here

Wrapping Things Up

Resources


Got Questions?

Use a spacebar or arrow keys to navigate