You are on page 1of 83

jQuery Mobile

A Touch-Optimized Web Framework for Smartphone & Tablets

By Ankit Garg ankit.rgarg@patni.com

Mobile Web is Massive

Goals and Philosophy 
  

This is Web, People want it to work Everywhere Unified System Universal Access Easy Development

One CodeBase All Platforms

Works EveryWhere. Experience varies based on capabilities.

Built Using

Progressive Enhancement

Current Status
Alpha 4.1 is realeased but is still buggy

Getting Started with jQuery Mobile

Download jQuery Mobile

1. Download jQuery Mobile files from http://jquerymobile.com/download/ 2. Extract the files into a folder 3. Place that folder in your project 4. Include three required files in your Project.

Jquery Mobile
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery Mobile Page</title>

<link rel="stylesheet" href="/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="/jquery.mobile-1.0a4.1.min.js">
</script> </head>

Use the CDN
1. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mob ile-1.0a4.1.min.css" /> 2. <script src="http://code.jquery.com/jquery1.5.2.min.js"></script> 3. <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobi le-1.0a4.1.min.js"></script>

jQuery Mobile Page Structure
Page

The jQuery Mobile page structure

‡ 

Within the Body Section of the HTML Document, the Content is essential divided into 1 Main Section and 3 Sub Sections:
Page
‡ ‡ ‡ Header Content Footer

Data-Role
<body> <div data-role="page"> <div data-role="header"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer"> </div><!-- /footer --> </div><!-- /page --> </body>

Hello World
<body> <div data-role="page"> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div><!-- /page --> </body>

Hello World Screenshot

Hello World Demo

Page
‡ The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.
<body> <div data-role="page"> <!-- jQuery Mobile page content goes here --> </div><!-- /page --> </body>

Multi Page Document
<body> <div data-role="page" id="home"> </div><!-- /home page --> <div data-role="page" id="products"> </div><!-- /products page --> <div data-role="page" id="services"> </div><!-- /home page --> <div data-role="page" id="about"> </div><!-- /home page --> <div data-role="page" id="contact"> </div><!-- /home page --> </body>

Multi Page Demo

Basic List
<div data-role="content"> <p>Hello world</p> <ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> </div><!-- /content -->

Basic List Output

Add data-role and see the magic
<div data-role="content"> <p>Hello world</p> <ul data-role="listview" data-inset="true"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> </div><!-- /content -->

List on Device

Basic List Demo

Linking each Item
<div data-role="content"> <p>Hello world</p> <ul data-role="listview" data-inset="true"> <li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>

<li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content -->

Linking each item

Linking of Pages
1. External page linking 2. Local, Internal Linked ³Pages´

External Page Linking
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" datatheme="b"> <li><a href="products.html´ rel=³external´ >Products</a></li> <li><a href="services.html´ rel=³external´ >Services</a></li> <li><a href="about.html´ rel=³external´ >About us</a></li> <li><a href="contact.html´ rel=³external´ >Contact</a></li> </ul> </div><!-- /content -->

Internal Page Linking
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" datatheme="b"> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About us</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!-- /content -->

Multi Page Model

Linking Pages Demo

Page Transition
‡  <a href="index.html" data-transition="pop³ >I will pop</a> Six CSS-based transition effects ² ² ² ² ² ² Slide (Default transition right to left) Slideup Slidedown Pop Fade Flip

Transition Demo

Dialogs
‡ <a href="products.html" data-rel="dialog" transition="pop">Open dialog</a> data- 

Any page can be presented as a modal dialog by adding the datarel="dialog" attribute to the page anchor link 

Framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.

Dialog

Dialog Demo

ToolBars 
Two standard types of toolbars
² The Header bar serves as the page title, is usually the first element inside each mobile page, and typically contains a page title and up to two buttons. ² The Footer bar is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.

Header bar

<div data-role="header"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data- theme="b">Save</a> </div>

Auto Back Button

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

Custom Back Button

<div data-role="header"> <a href="index.html" data-rel="back" data-icon="arrow-l">Back</a> <h1>Page Title</h1> </div>

Footer

<div data-role="footer"> <a href="index.html" data-role="button" data-icon="delete">Remove</a> <a href="index.html" data-role="button" data-icon="plus">Add</a> <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> <a href="index.html" data-role="button" data-icon="arrow-d">Down</a> </div>

Navbar

<div data-role=³footer´> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div><!-- /navbar --> </div>

Navbar with icons

data-position=´fixed´

data-fullscreen=´true´

ListView
Unordered List Ordered List

Nested List or Drillable pages

Split Button List

<ul data-role=³listview´ data-split-icon=³gear´> <li> <img src="images/album-bb.jpg" /> <h3><a href="bb-detail.html">Broken Bells</a></h3> <p>Broken Bells</p> <a href="bb-purchase.html" data-rel="dialog">Purchase album</a> </li> </ul>

Icons + Count Bubbles

<li> <img src="images/gf.png" alt="France" class="ui-li-icon"> <a href="france/">France</a> <span class="ui-li-count">4</span> </li>

List Dividers

<li data-role="list-divider">A</li>

Filter Bar

<ul data-filter="true">

Inset Style

<ul data-inset="true">

Advanced List Demo

Buttons

<a href="index.html" data-role="button">Link button</a>

Buttons

Icons

<a href="delete-confirm.html" data-icon="delete">Delete</a>

Icon Position

Button Groups

<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>

Horizontal Groups

<div data-role="controlgroup" data-type="horizontal">

Inline Buttons

<div data-inline="true"> <a href="index.html" data-role="button" data-inline=´true´>Cancel</a> <a href="index.html" data-role="button" data-theme="b" data- inline=´true´>Save</a> </div>

Button Demo

Forms
‡ Start with a basic form element. ‡ Associate Labels with Ids
‡ ‡ ‡ ‡ ‡ ‡ <form action="handler.php" method="post"> <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name³ value="" /> </div> </form>

Forms

Forms
type=´passwordµ

Forms
type=´numberµ

Forms
type=´emailµ

Forms
type=´urlµ

Forms
type=´telµ

Forms
Textarea

Search Input
<label for="find">Search:</label> <input type="search" id="find" value="" />

Slider
<div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="50" min="0" max="100" /> </div>

Flip Switch Slider
<label for="switch">Flip switch:</label> <select name="switch" id="switch" datarole="slider"> <option value="off">Off</option> <option value="on">On</option> </select>

Radio Button
‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ <fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" name="r1" id="r1" value="choice-1" checked="checked" /> <label for="r1">Cat</label> <input type="radio" name="r2" id="r2" value="choice-2" /> <label for="r2">Dog</label> <input type="radio" name="r3" id="r3" value="choice-3" /> <label for="r3">Hampster</label> <input type="radio" name="r4" id="r4" value="choice-4" /> <label for="r4">Lizard</label> </fieldset>

RadioButton

<fieldset data-role="controlgroup" data-type="horizontal">

CheckBox

Select Menu
‡ <label for="select-choice-1">Choose shipping method:</label> ‡ <select name="select-choice-1" id="select-choice1"> ‡ <option value="standard">Standard: 7 day</option> ‡ <option value="rush">Rush: 3 days</option> ‡ <option value="express">Express: next day</option> ‡ <option value="overnight">Overnight</option> ‡ </select>

data-native-menu="true"

data-native-menu="false"

Long select menu

Submitting forms
‡ Submitting via jQuery
± $.mobile.changePage({ ± url: "data/handler.php", ± type: "post", ± data: { "shipping": "Fast!" } ± });

Form Demo

THANK YOU