JQuery Mobile is a framework for building mobile web applications using minimal code. It is built on top of jQuery and jQuery UI, leveraging their JavaScript libraries and CSS frameworks. JQuery Mobile provides a range of UI elements, widgets, page transitions, themes, and events for developing mobile apps that work across various mobile platforms and devices. It allows creating basic single page apps with HTML5 markup and managing page navigation. The framework also supports server communication through AJAX and provides mobile events for touch interactions.

1. jQuery Mobile
A Framework for mobile devices
Madhur Garg
January, 2012

2. JQuery Mobile Framework-Intro
 A framework for developing mobile application with
minimal efforts.
 Framework based on jQuery and jQuery-UI
 jQuery – JavaScript library with cross browser support and
lots of other thing
 Made web developer life easier.
 jQuery-UI – JavaScript library based on jQuery and CSS.
Provides some effects, interactions and widgets.
 Most powerful feature is widgets.
 Tinymice library is also a plug-in based on jQuery.

3. JQuery for developingFramework
 Framework
Mobile application for mobile
devices, supporting almost all the mobile platform those
are having a nominal market share.
 It's a framework built on top of jQuery that provides a
range of user interface elements and features for you to
use in your mobile apps.
 Not only a JavaScript library but provides lots of other
stuff like widgets(with the help of jQuery UI), page
management, ajax support(with the help of jQuery),
animation etc

4. Basic Page Structure (with HTML5
) Here to get the code
Click
Click here to run the code
Note :-
“data-” attributes are a wonderful new feature of HTML5
that let you add any attributes you like to an element. All
you have to do is start your attribute name with the data-
prefix.

5. Multi Page Structure (with HTML5
) Here to get the code
Click
Click here to run the code

6. Page Management in some situation.
 All Pages are loaded by ajax except
 Data attribute(data-transition) provided to apply some
animation during page transition.
 Dialog :-
 By adding data-rel="dialog" to a link, you can make the linked
page appear as a dialog, with rounded corners, margins and a
dark background
 Internet Demo :- click here

7. Theme Support
 Some default themes are available.
 Data attribute (data-theme) is used to apply theme
 Below code is creating a link with a role button and
applying some theme on that button
 <a href="#" data-role="button" data-theme="a">About this
app</a>
Internet Demo :- click here

8. Eventsmaking it easy to build mobile user interfaces,
 As well as
jQuery Mobile adds some mobile-specific events that
you can use to detect actions performed on mobile
devices.
 For example, you can use taphold to detect if the user tapped and
held their finger on an element, and swipe to detect if the user
swiped horizontally from left to right (or right to left) across the
element:
 List of some customized events
 Tap
 tap-and-hold
 swipe, and orientation change

9. Key Code for server
communication
 Ajax :-
 $.ajax({
type: "POST",
data:stringtype,
url: serverURL,
dataType: "json“/”XML”,
success: handleResult,
error: function(xhr, textData, data) {
alert(“Error");
}
});

10. Study Material
 http://www.jqmgallery.com/jquery-mobile-tutorials/

11. Server communication
Example :- Twitter Demo

12. jQuery Mobile
A Framework for mobile devices
Madhur Garg
Date (January 2012)

13. Thank You