Jquery Mobile: A Touch-Optimized Web Framework For Smartphone & Tablets

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.mobile-1.0a4.1.min.css" />
2. <script
src="http://code.jquery.com/jquery-
1.5.2.min.js"></script>
3. <script
src="http://code.jquery.com/mobile/1.0a4.1/
jquery.mobile-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>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
</body>
Hello World
<body>
<p>Hello world</p>
</div>
</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>
</body>
Multi Page Document
<body>
<div data-role="page" id="home">
</div>
<div data-role="page" id="products">
</div>
<div data-role="page" id="services">
<div data-role="page" id="about">
<div data-role="page" id="contact">
</body>
Multi Page Demo
Basic List
<p>Hello world</p>
<ul>
<li>Products</li>
<li>Services</li>
<li>About us</li>
<li>Contact</li>
</ul>
Basic List Output
Add data-role and see the magic
<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>
List on Device
Basic List Demo
Linking each Item
<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>
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>

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>
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"
data-transition="pop">Open dialog</a>
 Any page can be presented as a modal dialog by adding the data-

rel="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
<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
<h1>Page Title</h1>
</div>
Custom Back Button
<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>
</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" data-
role="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>
• <label for="r3">Hampster</label>
• <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-choice-1">
• <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

Jquery Mobile: A Touch-Optimized Web Framework For Smartphone & Tablets

Uploaded by

Copyright:

Available Formats

Jquery Mobile: A Touch-Optimized Web Framework For Smartphone & Tablets

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery Mobile: A Touch-Optimized Web Framework For Smartphone & Tablets

Uploaded by

Copyright:

Available Formats

jQuery Mobile

A Touch-Optimized Web Framework for Smartphone & Tablets

1. Download jQuery Mobile files from http://jquerymobile.com/download/

<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">

• Within the Body Section of the HTML Document, the Content is

1. External page linking

2. Local, Internal Linked “Pages”

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

</div>

• <a href="index.html" data-transition="pop“ >I will pop</a>

 Six CSS-based transition effects

– Slide (Default transition right to left)

 Any page can be presented as a modal dialog by adding the data-

page title and up to two buttons.

contains a combination of text and buttons.

<a href="index.html" data-rel="back" data-icon="arrow-l">Back</a>

<ul data-role=“listview” data-split-icon=“gear”>

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

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

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

• <form action="handler.php" method="post">

• <input type="radio" name="r1" id="r1" value="choice-1" checked="checked" />

• <input type="radio" name="r2" id="r2" value="choice-2" />

• <input type="radio" name="r3" id="r3" value="choice-3" />

• <input type="radio" name="r4" id="r4" value="choice-4" />

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

You might also like