jQuery Mobile Tutorial – Chapter #1 – Introduction

What is jQuery Mobile?
  1. jQuery Mobile is a free, open-source, cross-platform, JavaScript library that you can use for developing mobile websites.
  2. This library lets you create pages that look and feel like the pages of a native mobile application.
  3. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.

Why jQuery Mobile?
  1. jQuery mobile framework takes the “write less, do more” mantra to the next level.
  2. Yes instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.
  3. Mobile website developed using jQuery mobile framework will work on different mobile platforms like Android, iPhone, Blackberry, Windows(Mobile) etc.,
4 reasons to use jQuery Mobile


  1. Ajaxified Navigation:In contrast to the way you develop the web pages for a screen/desktop web site, jQuery Mobile lets you create multiple pages in a single HTML file. Here, you can see two pages of a site along with the HTML for these pages. What’s surprising is that both pages are coded within a single HTML file. Look at the below image where it is illustrated briefly.
    1. User clicks link present inside a webpage
    2. Resource page.html is loaded from the server through AJAX request
    3. index.html content has been removed from within <body> and </body> tags.
    4. page.html has been loaded and rendered with slide transition effect.

  2. Layout and theming engine
    jQuery mobile framework has come up with layout and theming engine so we don’t need to worry about the layout of our web page design. There is a attribute called ‘data-role’ which determine the layout design of a web page. In the below image, you could see data-role as header, content, footer which magically brings the UI effect.
  3. Touch-friendly Inputs(and widgets)
    Form input elements UI are really eye catchy in jQuery mobile. If you see the below image, you could feel there is a big difference in UI for mobile and desktop versions. This could bring the feel for the user like working on a native application rather than a web app.

    More jQuery mobile UI controls:
  4. Widest browser coverage
    jQuery mobile is compatible with all the modern mobile browsers. It works well with the native browsers present in Android, iPhone, Blackberry etc which are using its native browser (like webkit) to render the mobile web pages we created.

Keep looking for more chapters on jQuery mobile framework. If you like this post or want to share something, do share it right away in the comment section below.

Related Articles

Author: Udhay

Share This Post On
468 ad
Join now to get more access to our Android Tutorials

Join now to get more access to our Android Tutorials

Once you Join, you will receive Mail containing latest Android Tutorials once a month !!

I promise I wont spam you !!

You have Successfully Subscribed!

Pin It on Pinterest