Jquery mobile

Introduction

• People around the globe are accessing the web via
their smartphones more often than ever. So far in
2013, 17.4% of web traffic has come through
mobile, representing more than a 6% increase since
2012 11.1% of traffic came from mobile.

Challenges for developing Mobile Web
App
Creating web apps and sites for the Mobile Web has its own sets of challenges and techniques. From UIs
optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal
devices have, developing for mobile devices requires a paradigm shift for those of us who’ve
traditionally created products aimed at desktops.
To help you rapidly deploy cross-platform mobile apps and websites, there’s a wide range of JavaScript
frameworks you can take advantage of.
Some common characteristics of JavaScript mobile web development frameworks:
• Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an
extra set of challenges in user interface design. Mobile web development frameworks provide standard
UI elements and event-handling specifically for mobile device platforms.
• Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get
your app to a wide range of users.
• Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is
placed into mobile web development frameworks.
• Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support
HTML5 and CSS3, and so mobile web development frameworks take advantage of new features
available in these upcoming W3C specifications for a better user experience.
• WAI-ARIA (Web Accessibility Initiative : Accessible Rich Internet Applications) is a technical
specification published by the World Wide Web Consortium that specifies how to increase
the accessibility of web pages, in particular, dynamic content and user interface components developed
with Ajax, HTML, JavaScript and related technologies.

What is JqueryMobile
• Mobile framework using jQuery (obviously).
• Aggresively cross-browser, cross-platform.
• Create web apps that feel as close to native as
possible.
• Markup driven, minimal code required to get
up and running.
• Focused on progressive
enhancement, graceful degradation.

• jQuery Mobile is a cross platform mobile framework designed to
simplify and enhance the development of mobile web applications
by integrating HTML5, CSS3, jQuery and jQuery UI into one
framework that is not only robust, but maintainable and organized.
• jQuery Mobile is built upon the existing jQuery core, meaning that if
you understand the jQuery syntax, then you will have no problems
getting JM to work. The framework is compatible with all major
mobile and desktop applications including
iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows
Mobile, Opera Mobile/Mini, Firefox Mobile and all modern desktop
browsers.
• Its lightweight size (about 20K compressed) makes it a speed freak
and the fact that it uses minimal image dependencies also speeds it
up ridiculously. Its Progressive enhancement approach brings core
content and functionality to all mobile, tablet and desktop
platforms and a rich, installed application-like experience on newer
mobile platforms.

• Automatic initialization by using HTML5 data-role
attributes in the HTML markup to act as the trigger to
automatically initialize all jQuery Mobile widgets found on
a page and accessibility features such as WAI-ARIA are also
included to ensure that the pages work for screen readers
(e.g. VoiceOver in iOS) and other assistive technologies.
• jQuery Mobile's API supports not only Touch events, but
also the usual Mouse events usually associated with jQuery,
making it completely cross-browser and platform
compatible. Built in controls are not only themable by the
built in UI, but the Touch Optimized interface is completely
supported by the UI. As an extra measure, jQuery
Themeroller can also build custom widget designs for you
to use.

•

•
•

Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup
enhancements as soon as it loads (long before the document.ready event fires). These enhancements are applied
based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the
settings are needed, they are easy to configure.
The mobileinit event
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default
settings, bind to mobileinit.
$(document).bind("mobileinit", function(){
//apply overrides here
});

•

Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery
Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
You can override default settings by extending the $.mobile object using jQuery's $.extend method.

$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
foo: bar
});
});

Data- attribute reference
• The jQuery Mobile framework uses
HTML5 data- attributes to allow for markupbased initialization and configuration of
widgets. These attributes are completely
optional; calling plugins manually and passing
options directly is also supported. To avoid
naming conflicts with other plugins or
frameworks that also usedata- attributes, set a
custom namespace by modifying the ns global
option.

Jquery Mobile Theming
• jQuery Mobile has a robust theme framework
that supports up to 26 sets of
toolbar, content, and button colors, called a
"swatch". The framework comes with five
defined themes (swatches "a" to "e") which
can be used readily, removed, or overwritten.
• we can download the theme from this
URL:http://jQuerymobile.com/themeroller

Jquery Mobile Theming
• To use your theme, add it to the head of your page before the
jQuery.mobile.structure file, like this:
<!DOCTYPE html>
<html>
<head> <title>jQuery Mobile page</title>
<meta charset="utf-8" /> <meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href=“jQuery.mobile.structure1.1.1.min.css" />
<script src=“jQuery-1.7.1.min.js"></script>
<script src=“jQuery.mobile-1.1.1.min.js"></script>
</head>

Jquery Mobile Components - Page
• The page is the primary unit of interaction in
jQuery Mobile and is used to group content into
logical views that can be animated in and out of
view with page transitions. A HTML document
may start with a single "page" and the AJAX
navigation system will load additional pages on
demand into the DOM as users navigate around.
Alternatively, a HTML document can be built with
multiple "pages" inside it and the framework will
transition between these local views with no
need to request content from the server.

Mobile page structure
• A jQuery Mobile site must start with an
HTML5 "doctype" to take full advantage of all
of the framework's features. (Older devices
with browsers that don't understand HTML5
will safely ignore the 'doctype' and various
custom attributes.)
• In the "head", references to jQuery, jQuery
Mobile and the mobile theme CSS are all
required to start things off.

Sample Jquery Mobile Page Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
...content goes here...
</body>
</html>

Viewport meta tag
• meta viewport tag in the head specify how the browser should
display the page zoom level and dimensions. If this isn't set, many
mobile browsers will use a "virtual" page width around 900 pixels to
make it work well with existing desktop sites but the screens may
look zoomed out and too wide. By setting the viewport attributes
to content="width=device-width, initial-scale=1", the width will be
set to the pixel width of the device screen.
<meta name="viewport" content="width=device-width, initialscale=1">
• These settings do not disable the user's ability to zoom the pages,
which is nice from an accessibility perspective. There is a minor
issue in iOS that doesn't properly set the width when changing
orientations with these viewport settings, but this will hopefully be
fixed in a future release. You can set other viewport values to
disable zooming if required since this is part of your page content,
not the library.

Inside the body
• Inside the <body> tag, each view or "page" on the mobile device is
identified with an element (usually a div) with the data-role="page"
attribute. View the data- attribute reference to see all the possible
attributes you can add to pages.
<div data-role="page">
<div data-role="header">...
</div>
<div data-role="content">
...</div>
<div data-role="footer">...</div>
</div>

• Within the "page" container, any valid HTML markup can be
used, but for typical pages in jQuery Mobile, the immediate
children of a "page" are divs with data-roles of
"header", "content", and "footer".

Different Page templates
•

Single page template
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>

<div data-role="header">
<h1>Page Title</h1>
</div>
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>

• Multi-page template
– A single HTML document can contain multiple
"pages" that are loaded together by stacking
multiple divs with a data-role of "page". Each
"page" block needs a unique id (id="foo") that will
be used to link internally between "pages"
(href="#foo"). When a link is clicked, the
framework will look for an internal "page" with
the id and transition it into view.

<body>

<div data-role="page" id="foo">

<h1>Foo</h1>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>


<div data-role="page" id="bar">
<h1>Bar</h1>
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
</body>

Difference between Single Page and
Multipage Template
Single Page Template:
•
•
•
•
•
•
•
•
•
•
•
•

Lighter and cleaner. Each page is a separate html file and more modular.
Better fallback if JavaScript is not supported. So works well on more platforms, you could even
target grade C browsers
On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any
new page loaded is added to the DOM. Any previously shown page is removed from the DOM. The
start page is always in the DOM.
The DOM size is relatively smaller
Optional to use the "page" data-role element in the code
Can turn off Ajax Navigation between pages using data-ajax="false"
Recommend to use the <title> tag for page titles
The <title> tag always gets precedence during page loads
Consumes more bandwidth as each page navigation generates a new request
Navigating back to a previously loaded page will again generate a fresh request (with DOM caching
you can avoid reloading of the same pages multiple times)
First load is faster, but every subsequent page has to be fetched
Suitable for larger applications and situations where you want to target as many platforms as
possible including platforms which lack JavaScript support

Difference between Single Page and
Multipage Template
Multi Page Template:
•
•
•
•
•
•
•
•
•
•
•

Heavier. All the pages are in a single html file.
Needs JavaScript support as Ajax Navigation is used
Multiple page containers are present, and only the first one is shown when page loads
Large applications with many pages will increase the DOM size
The "page" data-role element is required
Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is
used
Recommend to use the data-title attribute for all page titles
On first load, <title> tag is used and subsequent transitions data-title is used for page titles
Since all pages are already loaded, no additional requests are generated for navigating between
pages
First load is slower as the file size is larger, but subsequent page navigation is fast
Suitable for relatively smaller applications and situations where you know the capabilities of your
target platforms including presence of JavaScript support

Jquery Mobile Components - Content
Container with data-role="content"
data-theme
swatch letter (a-z)
For Ex:
<body>
<h1>Page Title</h1>
<p>Page content goes here.</p>
</div>
</body>

Jquery Mobile Components - Checkbox
• Pairs of labels and inputs with type="checkbox" are autoenhanced, no data-role required
• data-mini true | false - Compact sized version
• data-role none (prevents auto-enhancement to use
native control)
• data-theme
swatch letter (a-z) - Added to the form
element
• Multiple checkboxes can be wrapped in a container with a
data-role="controlgroup" attribute for a vertically grouped
set. Add the data-type="horizontal" attribute for the
checkboxes to sit side-by-side. Add the data-mini="true" to
get the mini/compact sized version for all the checkboxes
that appear in the controlgroup.

Jquery Mobile Components –
Checkbox Group
Example:

<div data-role="fieldcontain">
<fieldset data-role="controlgroup"> or <fieldset data-role="controlgroup" data-type="horizontal">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">Cheetos</label>
<input type=“checkbox” name=“checkbox-2” id=“checkbox-2” class=“custom” /> <label for=“checkbox-2”>Doritos</label>
<input type=“checkbox” name=“checkbox-3” id=“checkbox-3” class=“custom” /> <label for=“checkbox-3”>Fritos</label>
<input type=“checkbox” name=“checkbox-4” id=“checkbox-4” class=“custom” /> <label for=“checkbox-4”>Sun Chips</label>
</fieldset>
</div>

Collapsible
A heading and content wrapped in a container with the datarole="collapsible“
• data-collapsed
true | false
• data-content-theme swatch letter (a-z)
• data-iconpos
left | right | top | bottom
• data-mini true | false - Compact sized version
• data-theme swatch letter (a-z)
Example:
<div data-role="collapsible" data-content-theme="c">
<h3>Header</h3>
<p>I'm the collapsible content with a themed content block set to
"c".</p>
</div>

Collapsible Set
A number of collapsibles wrapped in a container with the datarole="collapsible-set“
Example:
<div data-role="collapsible-set“>
<div data-role="collapsible" datacollapsed="false“><h3>Section 1</h3><p>I'm the collapsible set
content for section 1.</p></div>
<div data-role="collapsible“><h3>Section 2</h3><p>I'm the
collapsible set content for section 2.</p></div>
<div data-role="collapsible“><h3>Section 2</h3><p>I'm the
collapsible set content for section 2.</p></div>
</div>

Collapsible Group
DIV or FIELDSET container with data-role="controlgroup". Visually integrate multiple
button-styled inputs of a single type (checkboxes, link-based buttons, radio
buttons, selects) into a group. For grouping form checkboxes and radio
buttons, the fieldset container is recommended inside a div container with the
data-role="fieldcontain", to improve label styling.
• data-mini
true | false - Compact sized version for all items in the
controlgroup
• data-type
horizontal | vertical - For horizontal or vertical item alignment

Example:
<div data-role="controlgroup"> or <div data-role="controlgroup“ datatype="horizontal" >
<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>

Jquery Mobile Components – Dialog
Container with data-role="dialog" or linked to with data-rel="dialog"
on the anchor.
• data-close-btn-text string (text for the close button, dialog only)
• data-dom-cache
true | false
• data-overlay-theme swatch letter (a-z) - overlay theme when the
page is opened in a dialog
• data-theme swatch letter (a-z)
• data-title
string (title used when page is shown)
Example: <a href="foo.html" data-rel="dialog" datatransition="pop">Open dialog</a>

Jquery Mobile Components – Field
Container
Container with data-role="fieldcontain"
wrapped around label/form element pair
Example:
<div data-role="fieldcontain" >
<label for="basic">Text Input:</label> <input type="text"
name="name" id="basic" data-mini="true" />
</div>

Jquery Mobile Components – Fixed
Toolbar
Container with data-role="header" or data-role="footer" plus the attribute dataposition="fixed"
• data-disable-page-zoom
true | false - User-scaling-ability for pages
with fixed toolbars
• data-fullscreen
true | false - Setting toolbars over the page-content
• data-tap-toggle
true | false - Ability to toggle toolbar-visibility on user
tap/click
• data-transition
slide | fade | none - Show/hide-transition when a
tap/click occurs
Example:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
Which results in fixed header at top. The header will always on display even we
scroll down. Similarly we can create for footer too.

Jquery Mobile Components – Flip
Toggle Switch
Select with data-role="slider", two options only
• data-mini
• data-role
none (prevents auto-enhancement to use native control)
• data-theme swatch letter (a-z) - Added to the form element
• data-track-theme
swatch letter (a-z) - Added to the form element
Example:
<label for="flip-1">Select slider:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

Header/Footer
Container with data-role=“header/footer"
• data-id string (unique id, useful in persistent
footers)
• data-position fixed
• data-fullscreen true (used in conjunction with fixed
toolbars)
• data-theme
swatch letter (a-z)

Jquery Mobile Components – Navbar
A number of LIs wrapped in a container with data-role="navbar"
• data-iconpos left | right | top | bottom | notext
To add icons to the navbar items, the data-icon attribute is used, specifying a standard
mobile icon for each item.
Navbars inherit the theme-swatch from their parent container.
Setting the data-theme attribute to a navbar is not supported. The data-theme
attribute can be set individually to the links inside a navbar.
Example:
<div data-role="navbar">
<ul>
<li><a href="a.html“ class="ui-btn-active ui-state-persist" >One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div>

Radiobutton
Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required
•
data-mini
•
data-role
•
data-theme
Multiple radion buttons can be wrapped in a container with a data-role="controlgroup" attribute for a vertically
grouped set. Add the data-type="horizontal" attribute for the radio buttons to sit side-by-side. Add the datamini="true" to get the mini/compact sized version for all the radio buttons that appear in the controlgroup.
Example:
<fieldset data-role="controlgroup“>
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label
for="radio-choice-2">Dog</label>
<label
for="radio-choice-3">Hamster</label>
<label
for="radio-choice-4">Lizard</label>
</fieldset>

Jquery Mobile Components – Slider
Inputs with type="range" are auto-enhanced, no data-role required
• data-highlight
true | false - Adds an active state fill on track to
handle
• data-mini
• data-role
• data-theme swatch letter (a-z) - Added to the form element
• data-track-theme
Example:
<div data-role="fieldcontain">
<label for="slider-3">Input slider:</label>
<input type="range" name="slider-3" id="slider-3" value="25"
min="0" max="100" data-theme="a" data-track-theme="b" />
</div>

Jquery Mobile Components – Text
Input & Textarea
Input type="text|number|search|etc." or textarea elements are auto-enhanced, no data-role
required
• data-mini
• data-role
• data-theme
Example:
–
<div data-role="fieldcontain"> <label for="name">Text Input:</label> <input
type="text" name="name" id="name" value="" /> </div>

–

<div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea
name="textarea" id="textarea"></textarea> </div>

Jquery Mobile Components – Creating
a web page for below UI

Hands-on example
<!DOCTYPE html>
<html>
<head> <title>jQuery Mobile page</title>
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href=“jQuery.mobile.structure-1.1.1.min.css" />
<script src=“jQuery-1.7.1.min.js"></script>
<script src=“jQuery.mobile-1.1.1.min.js"></script>
</head>
<body>
<h1>Page Title</h1>
<div class="content-primary">
<form>
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain“><label for="name">Text Input:</label><input type="text" name="name" id="name" value="" /></li>
<li data-role="fieldcontain“><label for="textarea">Textarea:</label><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</li>
<li data-role="fieldcontain“><label for="search">Search Input:</label><input type="search" name="password" id="search" value="" /></li>
<li data-role="fieldcontain“><label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</li>
<li data-role="fieldcontain“><label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</li>

Hands-on example
<li data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /><label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /><label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /><label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /><label for="checkbox-4a">Sun Chips</label>
</fieldset>
</li>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" /><label for="checkbox-6">b</label>
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" /><label for="checkbox-7"><em>i</em></label>
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" /><label for="checkbox-8">u</label>
</fieldset>
</li>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<label for="radio-choice-3">Hamster</label>
<label for="radio-choice-4">Lizard</label>
</fieldset>
</li>

Hands-on example
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">List</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Grid</label>
</fieldset>
</li>
<label for="select-choice-1" class="select">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>
</li>
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3">
<option value="AL">Alabama</option>
</select>
</li>
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
<option>Custom menu example</option>
</select>
</li>

Hands-on example
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" datatheme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" datatheme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
</body>
</html>

Jquery Mobile Event
• jQuery Mobile offers several custom events
that build upon native events to create useful
hooks for development. Note that these
events employ various touch, mouse, and
window events, depending on event
existence, so you can bind to them for use in
both handheld and desktop environments.
You can bind to these events like you would
with other jQuery events, using live() or
bind().

Page Life Cycle
• pagebeforecreate – First event to occur before page is loaded into the DOM. This is an excellent event if you want to add
additional content to your DOM. This is because at this point DOM content is still intact and jQuery Mobile is waiting to enhance
page markup.
• pagecreate – Second event to occur if page is still not loaded into the DOM. It marks that page is loaded into the DOM and can
also be used in same fashion just like pagebeforecreate.
• pageinit – This event is perfect replacement for classic jQuery document ready. At this point page markup is enhanced and like
document ready it will trigger only once, at least in multi-page template. In multi-HTMl template pageinit will trigger every time
page is about to be shown.
• pagebeforehide – This is excellent event if you want to do something before page is hidden or before next page can be shown.
• pagehide – Unlike previous one this page even will trigger after pages is hidden, used page template will determine is this page
completely removed or just marked not-active (in case of multi-HTMl template this page is removed from DOM, unless it is
marked for cashing).
• pagebeforeshow – This event will trigger just before page is shown, it is also an excellent time to bind other events, like click
etc.
• pageshow – At this point page is shown. This event should be used for jQuery plugins that require precise page height cause
only at this point page height can be calculated correctly.
• pageremove – This event is triggered when page is about to be removed from the DOM, it will work only in case of multi-HTML
template when page cashing is turned off.
• pagebeforeload – This event will trigger when pageload function is used but before page is successfully loaded.
• pageload – Just like previous event, but this one will trigger only on a successful page load.
• pagebeforechange – This page event will trigger when changePagefunction is triggered but before page transition process. It
will trigger even during normal transition because changePagefunction is called automatically each time page is about to be
changed (I just wanted to clarify this, changePagedon’t need to be executed manually for this event to work). Must be bound to
the document object, it will not work bound to a page div.
• pagechange – Just like previous one, but this one will trigger on successful page change status.

Page Life Cycle
• To Summarize:

Use $(document).bind('pageinit'), not
$(document).ready()
• The first thing you learn in jQuery is to call code
inside the $(document).ready() function so
everything will execute as soon as the DOM is
loaded. However, in jQuery Mobile, Ajax is used
to load the contents of each page into the DOM
as you navigate, and the DOM ready handler only
executes for the first page. To execute code
whenever a new page is loaded and created, you
can bind to the pageinit event. This event is
explained in detail at the bottom of this page.

$(document).bind('pagecreate') vs
$(document).bind('pageinit')
• Prior to Beta 2 the recommendation to users wishing to manipulate
jQuery Mobile enhanced page and child widget markup was to bind
to the pagecreate event. In Beta 2 an internal change was made to
decouple each of the widgets by binding to the pagecreate event in
place of direct calls to the widget methods. As a result, users
binding to the pagecreate in mobileinit would find their binding
executing before the markup had been enhanced by each of the
plugins. In keeping with the lifecycle of the jQuery UI Widget
Factory, the initialization method is invoked after the create
method, so the pageinit event provides the correct timing for post
enhancement manipulation of the DOM and/or Javascript objects.
In short, if you were previously using pagecreate to manipulate the
enhanced markup before the page was shown, it's very likely you'll
want to migrate to 'pageinit'.

Develop Mobile / Tablet UI using
Dreamweaver CS6
•

Step 1. Create a new document  Select Page from Sample Mobile Starters  jQuery Mobile with theme  Select Create Button

Dreamweaver CS6
Step 2. Save the Html. It will automatically create html page with all the necessary jQuery UI CSS styles and JavaScript as below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header"><h1>Page One</h1></div>
<ul data-role="listview">
<li><a href="#page2">Page Two</a></li>
</ul>
</div>
<div data-role="footer"><h4>Page Footer</h4></div>
</div>
<div data-role="page" id="page2“><div data-role="header"><h1>Page Two</h1></div>
<div data-role="content“>Content</div>
<div data-role="footer"><h4>Page Footer</h4></div></div>
</body>
</html>

Dreamweaver CS6
•

Step 3. Insert the jQuery Mobile form controls as shown below and develop the html page as normally in previous versions of
Dreamweaver.

Dreamweaver CS6
•

Step 4. Preview the html page as Multiscreen Preview. Windows  Multiscreen Preview

Dreamweaver CS6
•

Step 5. It will display how HTML5 and CSS3 renders in different devices like Mobile/ Tablet and desktop as below.

Jquery mobile

More Related Content

What's hot

Viewers also liked

Similar to Jquery mobile

Recently uploaded

Jquery mobile