J Query Mobile

An Introduction to
JQuery Mobile
By Trevor Seeney
Agenda
What is JQuery Mobile

Basic Page Structure
Example Code
Roles
Elements (Forms, Buttons, Tables, etc.)
Themes
The Theme Roller
Slide-in Panels
Summary
What is JQuery Mobile
JQuery Mobile is a HTML5-based

Javascript framework with a user
interface system designed to
make responsive web sites and
apps that are accessible on all
smartphone, tablet and desktop
devices.
Note that the inclusion of the word 'mobile' in the

name is a deceptive because it works very well on
tablets and desktops.
AUserInterfaceFramework
JQuery Mobile is a user interface

framework.
Built over JQuery.
Implementation is the simple inclusion of a
Javascript file and a Style (CSS) file.
Is multi-platform smartphones, tablets
and desktop devices.
Knowledge of JQuery, Javascript and CSS
is not required
A great choice for the IBM/i

programmer
JQuery Mobiles "write less, do more"

mantra allows you to design a single highlybranded responsive application that will
work on all popular smart devices and
desktops.
JQuery Mobile provides the IBM/i

programmer with a fast path to developing
browser-based applications.
Aesthetics are part and parcel of the

interface
Some Other Advantages of using

JQuery Mobile
Open-source and free.

Cross-platform, cross-device and
cross-browser compatible.
Optimized for touch devices.
The design is themable and
customizable.
JQuery Mobile Constructs
It has been said that JQuery Mobile has

Divitis meaning its use of the <div> tag
in HTML is extensive.
Each <div> is assigned a role examples:

Page, Header, Footer, Content.
Each <div> has a class or theme, either

specified or inherited, to dictate styling.
Basic Page Structure

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" .css>
<script src="http:// ...js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
,,,,,,,,,,
</div>
<div data-role="content">
,,,,,,,,,,
</div>
<div data-role="footer">
,,,,,,,,,,
</div>
</div>
</body>
</html>
Lets Code
<!DOCTYPE html>
<html> <head>
<title>My first jQuery Mobile code</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.0/jquery.mobile1.2.0.min.css">
<script src="http://code.jquery.com/jquery1.8.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.2.0/jquery.mobile1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
Lets Code (2)

<div data-role="content">
<ul data-role="listview" data-inset="true
data-dividertheme="b">
<li data-role="list-divider">Options</li>
<li><a href="option1.html">Option 1</a></li>
</ul>
</div>
<div data-role="footer">
<h4> Thermwell </h4>
</div>
</div>
</body>
</html>
Sample Page (data-theme=a)
Sample Page (data-theme=b)
Roles
The five we have already seen:-
1.
data-page
data-header
data-content
data-footer
data-theme
2.
3.
4.
5.
Additional Roles
data-role='collapsible'
datarole="controlgroup"
datatype="horizontal"
Elements
More Elements
Table Styling
Table color striping can be achieved simply by

specifying a role of Table and some built in classes:<table data-role="table"
class="table-stroke table-stripe" >
Themes
Theme is the term used to describe the

styling of elements in JQuery Mobile.
A theme includes settings for including
font family, drop shadows for overlays, and
corner radius values for buttons and boxes,
etc.
In addition, the theme can include multiple
color swatches, each with color values for
bars, content blocks, buttons and list
items, and font
Swatches
5 Basic swatches
Black, Blue, Light Grey, Dark Gray and
Yellow
More on Swatches
Applying a swatch is achieved by specifying

the data-theme tag on an element.
The default theme is a, which is Black, and
is used when data-theme is not specified.
data-theme can be specified at the
role=page level.
A swatch can be applied to individual
elements in the page that is different from
the default for the page.
The Theme Roller
JQuery Mobile has a utility call the

Theme Roller where you can create your
own swatch and apply a data=theme
letter F,G,H etc.
Theme Roller
Theme Roller
Themes can be
saved as .CSS files
which in turn can
be
be included
included into
into
your
your site.
site.
A
A Custom
Custom Theme
Theme
Slide-in Panels
A neat effect intended to optimize

screen space, often used to slide-in a
menu.
data-role="panel, datadisplay="overlay
Slide-in
Panel Example
width:
250px
!important;"
A Real Application
Walker International Transportation (Order Entry Menu) running on an IBM/I
Order Menu
Selection Table
Order Entry
Summary
JQuery Mobile is easy to learn and use.

Offers a consistent rendering across all
browsers.
Aesthetically pleasing page layout and
element styling.
No Javascript and CSS knowledge required.
Leaves the IBM/I programmer to focus on
the substance of the page and not the
style.

J Query Mobile

Uploaded by

Document Information

Original Description:

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

J Query Mobile

Uploaded by

Copyright:

Available Formats

An Introduction to

What is JQuery Mobile

What is JQuery Mobile

JQuery Mobile is a HTML5-based

Note that the inclusion of the word 'mobile' in the

JQuery Mobile is a user interface

A great choice for the IBM/i

JQuery Mobiles "write less, do more"

JQuery Mobile provides the IBM/i

Aesthetics are part and parcel of the

Some Other Advantages of using

Open-source and free.

JQuery Mobile Constructs

It has been said that JQuery Mobile has

Each <div> is assigned a role examples:

Each <div> has a class or theme, either

Basic Page Structure

Lets Code (2)

Sample Page (data-theme=a)

Sample Page (data-theme=b)

The five we have already seen:-

Table color striping can be achieved simply by

Theme is the term used to describe the

Applying a swatch is achieved by specifying

The Theme Roller

JQuery Mobile has a utility call the

A neat effect intended to optimize

Walker International Transportation (Order Entry Menu) running on an IBM/I

JQuery Mobile is easy to learn and use.

You might also like