Thursday, September 22, 2011

jQuery Mobile.- Play with jQuery (if you you do not know javascript also!!.)

JQuery Mobile (Alpha 2.0).

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 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:
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.

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.
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
o The content of your application
Footer bar
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.


Page transitions:
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.

List views
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
      we define common
    • 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

No comments:

Post a Comment