An Introduction to jQuery Mobile

Posted by Pedram Mohammadi on December 22, 2016

When the web was first discovered, development was complicated and unstimulating. Building a simple image mouseover application required several lines of code, and it wouldn’t even work on some platforms. Fortunately, things got better when jQuery was introduced to the market. Not only did jQuery allow developers to create stunning JavaScript applications, but the applications could run comfortably in various places.

With the introduction of jQuery UI, the jQuery team took things a notch higher. With jQuery UI, developers could create nice-looking web applications upon the existing jQuery core. Better yet, in 2010, jQuery Mobile was introduced. With the introduction of yet another superb framework, jQuery continued to make things better and more efficient for developers around the world.

Built with a bias to mobile phones, jQuery Mobile is an effective, unified framework that offers UI components, data transitions, and other exciting features. jQuery Mobile leverages the functionalities of HTML5, CSS3, jQuery, and jQuery UI into a single framework that allows developers to achieve consistency across different platforms and devices.

Basic Features of jQuery Mobile

  • Great simplicity and usability

The jQuery Mobile framework is uncomplicated and flexible. Since the framework’s configuration interface is mark-up driven, developers can easily build their complete basic applications interface in HTML, with minimal or no JavaScript codes. Complex tasks requiring several lines of JavaScript code, such as Ajax calls and DOM manipulation, can easily be realized with few lines of code in mobile jQuery.

Furthermore, its simplicity allows developers to break their applications into multiple pages. Essentially, with the framework, developers can “write less, and do more.”

  • Progressive enhancement and graceful degradation

Progressive enhancement and graceful degradation are key features that propel the agility of jQuery Mobile by enabling it to support both high-end and less capable devices, for example, those lacking JavaScript support.

The framework allows developers to build applications that can be accessed by the widest number of browsers and devices, whether it’s Internet Explorer 6 or the newest Android or iPhone.

Mobile jQuery provides the ability to render the basic content (as built) on basic devices. And, with Mobile jQuery, sophisticated platforms and browsers will be increasingly enriched with additional, externally linked JavaScript and CSS.

  • Support for user-friendly inputs

During jQuery mobile development, developers can include an uncomplicated API to support touch, mouse, and cursor focus-based user input functionalities. Several types of easily styled and touch-friendly form elements are included in the framework. Examples include checkbox and radio sets, slider, search filtering, and menu selection elements. More so, every one of the form elements includes an alternate ‘mini’ version, which can be easily incorporated into the header and footer elements of a web page.

Furthermore, to ensure the user experience is optimized on mobile devices, the framework has a rich Ajax-driven navigation system that allows animated page transitions to take place seamlessly.

  • Accessibility

Besides its cross-platform capabilities, jQuery for mobile is created with a strong consideration for accessibility. The framework comes with support for Accessible Rich Internet Applications (WAI-ARIA) to assist disabled persons using screen readers, and allows other assistive technologies to easily access web pages.

  • Lightweight size

Mobile jQuery’s lightweight size (about 20KB when compressed) adds to its swiftness. Additionally, the fact that it employs minimal image dependencies also accelerates its capabilities.

  • Theming and UI widgets

jQuery Mobile has a built-in theme system that enables developers to determine their own application styling. With the jQuery Mobile Themeroller, developers can effectively customize their applications to fit their unique color tastes and preferences.

The framework also comes with various innovative, cross-platform widgets that enable developers to create more customized applications. Some of the available widgets are persistent toolbars, buttons, dialogs, and the commonly used popup widget.

  • Responsiveness

The framework’s full responsiveness enables the same underlying codebases to fit comfortably in different types of screens, from mobile devices to desktop-sized screens.

 

Basic Page Structure of jQuery Mobile

jQuery Mobile structure has all the UI components and attributes required for creating user-friendly and feature-rich mobile web applications and websites of all kinds—whether basic or advanced. Web pages, various types of list views, toolbars, a wide range of form elements and buttons, and dialogs, as well as other functionalities, can easily be built using the jQuery for mobile framework.

Importantly, since jQuery Mobile is created on top of jQuery core, it gives developers the opportunity to leverage jQuery UI code and access key facilities, such as robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let’s get a feel for what jQuery mobile development code looks like:

Here is the output when the above mobile jQuery lines of code are opened in a browser.

Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed from various devices with different screen resolutions without any worries of loss of consistency. The size of the items will change accordingly to suit the type of device.

As seen in the above code sample, the document is a simple HTML5 that includes the following three things:

  • Files from the jQuery Mobile CSS (jquery.mobile-1.1.1.min.css)
  • Files from the jQuery repository (jquery-1.7.1.min.js)
  • Files from the jQuery Mobile repository (jquery.mobile-1. 1.1.min.js)

These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page, retrieve these files, and host them on a private server.

Importantly, including the "viewport" metatag during jQuery mobile development instructs devices that the page width and the device screen width are equivalent (width=device-width). Furthermore, the tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

A closer examination of the jQuery for mobile code reveals some strange "data-" attributes scattered throughout. It is an improved feature of HTML5 that enables developers to pass organized data across an application, for example, the data-role="header" attribute defines head section of the web page.

The above example is just scratching the surface of the things developers can achieve using jQuery Mobile. The framework’s documentation is easy to follow and contains its several capabilities, including linking pages, incorporating animated page transitions, and designing buttons.

 

Powerful, Responsive, and Ready for the Future

jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to effectively handle certain cross-platform, cross-device, and cross-browser compatibility issues. The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

Topics: cPaaS