jQuery MobileA Framework for mobile devices

January, 2012

Madhur Garg

A framework for developing mobile application with minimal efforts.

Framework based on jQuery and jQuery-UIjQuery – 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.

JQuery Mobile Framework-Intro

Framework for developing 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

JQuery Mobile Framework

Click Here to get the codeClick 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.

Basic Page Structure (with HTML5 )

Click Here to get the codeClick here to run the code

Multi Page Structure (with HTML5 )

All Pages are loaded by ajax except in some situation.

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

Page Management

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

Theme Support

As well as making it easy to build mobile user interfaces, 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 

Events

Ajax :- $.ajax({

type: "POST",

data:stringtype,

url: serverURL,

dataType: "json“/”XML”,

success: handleResult,

error: function(xhr, textData, data) {

alert(“Error");

}

});

Key Code for server communication

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

Example :- Twitter Demo

Server communication

jQuery Mobile jQuery Mobile A Framework for mobile devicesA Framework for mobile devices

Date (January 2012)

Madhur Garg

Thank YouThank You