Introduction to JQuery Mobile

Table of contents

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:

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.
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.
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.
Accessibility
jQuery Mobile has support for Accessible Rich Internet Applications to help make web pages accessible for visitors with disabilities using dependable technologies.
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.
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> </ul>
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.

METHOD	USAGE
`$.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 for`min/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:

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

1.<head>

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

</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