Jquery Mobile

  Melvin       January 30, 2020

JQuery Mobile is a superb framework for writing mobile web applications. Built on top of the popular jQuery and jQuery user interface (UI), jQuery Mobile is an effective, unified framework for writing your mobile web application. With jQuery Mobile, you can ensure a consistent look, feel, and behavior across different mobile platforms. In terms of code implementation, jQuery Mobile is very similar to jQuery UI, but while jQuery UI is focused on desktop applications, jQuery Mobile is built with mobile devices in mind.

The basic features of jQuery Mobile include:

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 leverages 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, such as those without JavaScript support, and still provide the best possible experience.

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

Lightweight and modular

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, plus some icons.

Theming

The framework also provides a theme system that allows you to define your own application styling. With the new ThemeRoller application, you can easily create your own themes.

The jQuery Mobile framework includes all the UI components needed for building complete mobile web applications and websites: pages, dialogs, toolbars, different kinds of list views, a variety of form elements and buttons, and more. jQuery Mobile is built on top of jQuery core, so you have access to key facilities, including HTML and XML document object model (DOM) traversing and manipulation; event handling; server communication using Ajax; and animation and image effects for web pages.

With jQuery Mobile, you can write basic mobile web applications without much effort. Because jQuery Mobile is a very comprehensive framework with advanced events and APIs, you can also write advanced mobile web applications and websites.

Overview of the jQuery Mobile Library

As of this writing, jQuery Mobile consists of four files: a JavaScript file, a CSS file, and two PNG graphic sprites.

The JavaScript file is meant to be loaded after the base jQuery library. This script file performs various tasks, like creating widgets, applying event listeners, and enabling the API.

jQuery Mobile also includes a Cascading Style Sheet which specifies the layout and appearance of jQuery Mobile page elements. The Style Sheet also specifies transitions and animations with CSS3 transforms.

Finally, jQuery Mobile includes a small set of graphics for user interface elements. These are simple, standardized icons for navigation.

Browser support

Mobile browsers have come a long way, but not all mobile devices provide support for HTML5, CSS 3, and JavaScript. This arena is where jQuery Mobile's progressive enhancement and graceful degradation support come into play.jQuery Mobile supports both high-end and less capable devices, such as those without JavaScript support.

Progressive enhancement, which is design philosophy, consists of the following core principles:
All basic content should be accessible to all browsers.

All basic functionality should be accessible to all browsers.

The enhanced layout is provided by externally linked CSS.

Enhanced behavior is provided by externally linked JavaScript.

jQuery Mobile provides support for a large number of mobile devices. jQuery Mobile classifies, or groups, device support into three categories based on their level of support.

A-grade: Devices with support for a fully enhanced experience with Ajax-based animated page transitions. jQuery Mobile supports over 20 different devices, including iOS 3.2-5.0; Android 2.1-2.3 and 3.0; BlackBerry 6-7 and Playbook; Skyfire 4.1; Opera Mobile; and the desktop browsers Chrome, Firefox, Internet Explorer, and Opera.

B-grade: Devices with support for an enhanced experience but without Ajax navigation features. Supported devices include BlackBerry 5.0, Opera Mini5.0-6.5, and Nokia Symbian ^3.

C-grade: Devices with support for a basic, non-enhanced HTML experience. Supported devices include older smartphones, including BlackBerry 4.x, Windows Mobile, and others.

Structure of a jQuery Mobile page

HEADER

CONTENT AREA

FOOTER

Advantages of jQuery Mobile

It is easy to learn and develop applications if you have knowledge of HTML5, CSS3 features.

It is cross-platform and cross-browser compatible so you don't have to worry about writing different codes for each device resolution.

You can create the custom theme using ThemeRoller without writing the line of code. It supports all HTML5 browsers.

It uses HTML5 along with JavaScript for the easy development of web applications.

It is built in a way that allows the same code to automatically scale from the mobile screen to desktop screen.

Disadvantages of jQuery Mobile

There are limited options for CSS themes, so sites can look similar which are built by these themes.

Applications that are developed using jQuery Mobile are slower on mobiles.

It becomes more time consuming when you combine jQuery mobile with other mobile frameworks.

Difficult to provide complete customized visual design.

All the features in a device cannot be accessed by JavaScript in a browser.