JQuery Mobile (Alpha 2.0).
o jQuery Mobile is a touch-friendly web UI development framework that allows to develop mobile web applications that work across smartphones 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 @
Basic features of jQuery Mobile include:
Progressive enhancement and graceful degradation
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.
o The framework also provides a theme system that allows us to provide our own application styling.
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:
o Typically contains the page title and Back button
o The content of your application
o Typically contains navigational elements, copyright information, or whatever you need to add to the footer
HTML head section
o 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 nav bar to the footer section:
Defining multiple local pages
o 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.
o 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:
o Provides a horizontal transition
Slide up and Slide down
o Provide transitions up and down the screen
o Provides an explode type of transition
o Provides a fading transition
o Provides a flip transition
o We can add page transitions in two different ways:
o 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.
o List views, a fundamental type of UI element, are heavily used in mobile applications. jQuery Mobile supports numerous list views: basic, nested, numbered, and read-only lists; split buttons; list dividers; count bubbles; thumbnails; icons; search filter bars; inset styled lists; and theming lists.
o A list view is created by using the
- data attribute. o o Inside the
- list items.
o 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.
o Select menus are driven by native
- we define common