Introduction to JQuery Mobile

Reading Time: 4 minutes

Introduction to JQuery Mobile:

jQuery Mobile is a user interface (UI) framework that lets you develop mobile web applications that work across all smartphones and tablets. jQuery Mobile is built on top of the jQuery library, which makes it easy to learn if you already know jQuery. It uses HTML5, CSS3, JavaScript and AJAX to accomplish its work for laying out pages with minimal scripting., as well as animation and image effects for web pages. This blog provides you an introduction to the jQuery Mobile framework. Learn the basics of the framework and how to write a functional mobile web application user interface without writing a single line of JavaScript code.

Importance of Jquery Mobile

jQuery Mobile takes the “write less, do more” to the next level. Let me remember you :-

  • Android and Blackberry is written in Java.
  • iOS is written in Objective C.
  • Windows Phone is written in C# and .net, etc.

jQuery Mobile removes these dependency, it solves this problem, as it only uses HTML, CSS and JavaScript, which is standard for all mobile web browsers.

Features of jQuery Mobile are as follows:

  1. General simplicity and flexibility
    The framework is simple to use. You can:
    • Develop pages primarily using markup driven with minimal or no JavaScript.
    • Use advanced JavaScript and events.
    • Use a single HTML document with multiple embedded pages.
    • Break your application into multiple pages.
  2. Progressive enhancement and graceful degradation
    While jQuery Mobile advantages the latest HTML5, CSS 3, and JavaScript, not all mobile devices provide such support. jQuery Mobile philosophy is to support both high-end and less capable devices.
  3. Support for touch and other input methods
    jQuery Mobile provides support for different input methods and events: touch, mouse, and cursor focus-based user input methods.
  4. Accessibility
    jQuery Mobile has support for Accessible Rich Internet Applications to help make web pages accessible for visitors with disabilities using dependable technologies.
  5. Lightweight
    The framework is lightweight with an overall size (minified and gzipped for Version 1.0.1) of 24KB for the JavaScript library, 7KB for the CSS, includes some icons.
  6. Theming
    The framework also provides a theme that allows you to define your own application styling.

jQuery Mobile UI components

The jQuery Mobile framework includes the following UI components needed for building complete mobile web applications and websites

  • jQuery Mobile Pages
  • jQuery Mobile Buttons
  • jQuery Mobile Button Icons
  • jQuery Mobile Popups
  • jQuery Mobile Toolbars
  • jQuery Mobile Navigation Bars
  • jQuery Mobile Panels
  • jQuery Mobile Tables
  • jQuery Mobile Grids
  • jQuery Mobile List Views
  • jQuery Mobile Forms

HTML5 data-* attributes

jQuery Mobile relies on HTML5 data-* (* includes all different attributes like role, inline, rel etc) attributes to support the various UI elements, transitions, and page structure as shown in below table:

Component HTML5 data-* attribute
Form element (Select menu)
Choose an option:Option 1
Option 2
Option 3
Basic List views <ul data-role=”listview”>
<li><a href=”index.html”>One</a></li>
<li><a href=”index.html”>Two</a></li>
<li><a href=”index.html”>Three</a></li>
Dialogs <a href=”foo.html” data-rel=”dialog”>Open dialog</a>
<a href=”dialog.html” data-role=”button” data-inline=”true”
data-rel=”dialog” data-transition=”pop”>Open dialog</a>
Transitions <a href=”index.html” data-transition=”pop” data-back=”true”>

jQuery mobile methods and events

The JavaScript object jQuery is also referred to as $. The jQuery Mobile framework extends jQuery core with mobile plug-ins, $.mobile, which defines several events and methods:jQuery mobile methods and events

  • Touch events – triggers when a user touches the screen (tap and swipe)
  • Scroll events – triggers when a user scrolls up and down
  • Orientation events – triggers when the device rotates vertically or horizontally
  • Page events – triggers when a page is shown, hidden, created, loaded or unloaded.
$.mobile.changePage To programmatically change from one page to another.For example, to go to page weblog.php using a slide transition, use$.mobile.changePage("weblog.php", "slide").
$.mobile.pageLoading To show or hide the page loading message.For example, to hide the message, use$.mobile.pageLoading(true).
$.mobile.silentScroll To scroll to a particular Y position without generating scroll events.For example, to scroll to Y position 50, use$.mobile.silentScroll(100).
$.mobile.addResolutionBreakpoints jQuery Mobile already defines some breakpoints formin/max classes. Call this method to add breakpoints.For example, to add min/max class for 800 pixel widths, use$.mobile.addResolutionBreakpoints(800).
$.mobile.activePage Refers to the currently active page.

Adding jQuery Mobile to Your Web Pages

Add jQuery Mobile in head tag, There are two ways to add jQuery mobile in your project:

  1. Link to a jQuery Mobile library stored at a CDN.
  2. Link to a jQuery Mobile library stored at your computer.


     <meta name=“viewport” content=“width=device-width, initial-scale=1”>
     <!– Include jQuery Mobile stylesheets –>
     <link rel=“stylesheet” href=                  1.4.5.min.css”>
      <!– Include the jQuery library –>
      <script src=;></script>
      <!– Include the jQuery Mobile library –>
       <script src=;>                    </script>

Structure of a jQuery Mobile page

A general structure of a jQuery Mobile page. In general, a page structure should have the following sections:

Header bar
Typically contains the page title and Back button
The content of your application
Footer bar
Typically contains navigational elements, copyright information, or whatever you need to add to the footer.
<div data-role="page">
  <div data-role="header">...</div>
  <div id="contentWithHeaderAndFooter1" data-role="content">...</div>
  <div data-role="footer">...</div>
  <div data-role="header">...</div>
  <div id="contentWithHeaderAndFooter2" data-role="content">...</div>
  <div data-role="footer">...</div>
  <div id="contentWithNoHeaderAndFooter" data-role="content">...</div>
Rest of the things:
How to write code for creating pages, buttons, popups, navbars, tolbars all UI element of jQuery Mobile will be explained in my next blog… To be continued
Sources: Ibm developers Works

Written by 

Principal Architect at Knoldus Inc