jQuery Mobile.- Play with jQuery (No coding knowledge required.)

JQuery Mobile (Alpha 2.0).

Introduction

o jQuery Mobile, a user interface (UI) framework to write a functional mobile web application without writing a single line of JavaScript code. 

jQuery Mobile

o jQuery Mobile is a touch-friendly web UI development framework that allows to develop mobile web applications that work across smart phones and tablets. The jQuery Mobile framework builds on top of jQuery core and provides a number of facilities, including HTML and XML document object model (DOM) traversing and manipulation, handling events, performing server communication using Ajax, as well as animation and image effects for web pages. The mobile framework itself is a separate, additional download of around 12KB (minified and gzipped) from jQuery core, which is around 25KB when minified/gzipped. As with the rest of the jQuery framework, jQuery Mobile is a free, dual-licensed (MIT and GPL) library.

Downloads available @
o http://www.ibm.com/developerworks/web/library/wa-jqmobile/#download
o http://www.ibm.com/developerworks/web/library/wa-jqmobile/


Basic features of jQuery Mobile include:

General simplicity
o The framework is simple to use. We can develop pages mainly using markup driven with minimal or no JavaScript.

Progressive enhancement and graceful degradation
o While jQuery Mobile leverages the latest HTML5, CSS3, and JavaScript, not all mobile devices provide such support. 


Accessibility

o jQuery Mobile is designed with accessibility in mind. It has support for Accessible Rich Internet Applications (WAI-ARIA) to help make web pages accessible for visitors with disabilities using assistive technologies.
Small size
o The overall size of the jQuery Mobile framework is relatively small at 12KB for the JavaScript library, 6KB for the CSS, plus some icons.

Theming
o The framework also provides a theme system that allows us to provide our own application styling.


Browser support
o Not all mobile devices provide support for HTML5, CSS 3, and JavaScript. 
o jQuery Mobile currently provides support for the following mobile platforms:
o Apple® iOS: iPhone, iPod Touch, iPad (all versions)
o Android™: all devices (all versions)
o Blackberry® Torch (version 6)
o Palm™ WebOS Pre, Pixi
o Nokia® N900 (in progress)

Structure of a jQuery Mobile page

o jQuery Mobile has guidelines on the structure of pages themselves. In general, a page structure should have the following sections:

·       
Header bar
o Typically contains the page title and Back button
Content
o The content of your application
Footer bar
o Typically contains navigational elements, copyright information, or whatever you need to add to the footer



Example:


HTML head section


 Attributes that are telling jQuery Mobile what this element is, how to look like and how to behave.





Defining a page block:


Page header bar section:


Page content section:


Footer bar section:



Adding a navigation bar to the footer section:



Defining multiple local pages

 jQuery Mobile also provides support for multiple pages within a single HTML document. The multiple pages are local, internal linked "pages" that we can group together for preloading purposes. The structure of the multipage page is similar to the previous example of a single page, except that it will contain multiple page data-roles. Listing 8 shows an example.



Page transitions:
 

·         jQuery Mobile provides support for CSS-based page transitions (inspired by jQtouch), which are applied when navigating to a new page and back. The transitions include:
Slide

·         Provides a horizontal transition

·        Slide up and Slide down

·        Provide transitions up and down the screen
Pop

·         Provides an explode type of transition
 Fade

·        Provides a fading transition
Flip

·        Provides a flip transition

·        We can add page transitions in two different ways:

 1. Add a data-transition attribute to the link, using 

o   Use the data-transition attribute on static pages.

o   Programmatically, using $.mobile.changePage("pendingtasks.html", "slideup");

o   Use the programmatic approach when working with dynamic pages.

             2. List views:

o   JQuery mobile supports numerous list views.

Forms
Forms are used to post information to a server.

·         jQuery Mobile supports many form UI components: text inputs, search inputs, slider, flip toggle switch, radio buttons, checkboxes, select menus, and theming forms. 
Select menus are driven by native 

·         All form should be wrapped inside the form tag that has an action and method which will handle the form data processing to the server.

 

    Advantages of jQuery Mobile:

1.              Ease of development: Easy to learn and develop applications with the knowledge of HTML5, css,             jquery.

2.              Cross platform and cross browser compatibility.

3.              Easy to create custom theme with the help of jQuery framework.

4.              Responsive design for all devices.

 

    Disadvantages of jQuery Mobile:

1.              Limited options of css themes.

2.              Quite slower that mobile native applications.

3.              Difficult to provide customized design as compared to native design.

4.              All the features of the device cannot be accessed by scripting.