JQuery Mobile

Last updated
jQuery Mobile
Developer(s) The jQuery Team
Initial releaseOctober 16, 2010 (2010-10-16) [1]
Stable release
1.4.5 / October 31, 2014 (2014-10-31)
Preview release
1.5.0-rc1 / September 10, 2018 (2018-09-10)
Repository
Written in JavaScript
Platform See Mobile browser support
Size 351 KB / 142 KB (minified) / 40 KB (minified, gzipped)
Type Mobile application framework
License MIT [2]
Website jquerymobile.com

jQuery Mobile is a touch-optimized web framework (also known as a mobile framework), specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, [3] made necessary by the growing but heterogeneous tablet and smartphone market. [4] The jQuery Mobile framework is consistent with other mobile app frameworks [5] and platforms such as PhoneGap, Worklight, [6] etc.

Contents

As of October 7, 2021 jQuery Mobile has been deprecated. [7]

Features

(Source: from the jQuery Mobile website) [3]

Example usage

$('div').on('tap',function(event){alert('element tapped ');});
$(document).ready(function(){$('.myList li').on('click touchstart',function(){$('.myDiv').slideDown('500');});});

A basic example

What follows is a basic jQuery Mobile project utilizing HTML5 semantic elements. It is important to link to the jQuery and jQuery Mobile JavaScript libraries, and stylesheet (the files can be downloaded and hosted locally, but it is recommended to link to the files hosted on the jQuery CDN).

A screen of the project is defined by a section HTML5 element, and data-role of page. Note that data-role is an example of the HTML5 data attribute, in this case being defined by jQuery Mobile. A page may have header and footer elements with data-role of header and footer, respectively. In between, there may be an article element, with a role of main and a class of ui-content. Lastly, a nav element, with data-role of navbar may be present.

One HTML document can contain more than one section element, and thus more than one screenful of content. This way it is only necessary to load one file which includes multiple pages of content. One page can link to another page within the same file by referencing the page's id attribute (e.g. href="#second").

In the example below, two other data- attributes are used. The data-theme attribute tells the browser what theme to render. The data-add-back-btn attribute adds a back button to the page if set to true.

Lastly, icons can be added to elements via the data-icon attribute. jQuery Mobile has fifty commonly-used icons built in.

A brief explanation of the Data Attributes used in this example:

data-role – Specifies the role of the element, such as header, content, footer, etc.

data-theme – Specifies which design theme to use for elements within a container. Can be set to: a or b.

data-position – Specifies whether the element should be fixed, in which case it will render at the top (for header) or bottom (for footer).

data-transition – Specifies one of ten built-in animations to use when loading new pages.

data-icon – Specifies one of fifty built-in icons that can be added to an element.

<!doctype html><html><head><metacharset="utf-8"><title>jQuery Mobile Example</title><metaname="viewport"content="initial-scale=1, user-scalable=no, width=device-width"><linkrel="stylesheet"href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"></head><body><sectiondata-role="page"id="first"data-theme="a"><headerdata-role="header"data-position="fixed"><h1>Page 1 Header</h1></header><articlerole="main"class="ui-content"><h2>Hello, world!</h2><ahref="#second"data-role="button"data-inline="true"data-transition="flow"data-icon="carat-r"data-iconpos="right">Go to Page 2</a></article><footerdata-role="footer"data-position="fixed"><h4>Page 1 Footer</h4></footer></section><sectiondata-role="page"id="second"data-theme="b"><headerdata-role="header"data-position="fixed"data-add-back-btn="true"><h1>Page 2 Header</h1></header><articlerole="main"class="ui-content"><h2>Example Page</h2></article><footerdata-role="footer"data-position="fixed"><h4>Page 2 Footer</h4></footer></section><scriptsrc="https://code.jquery.com/jquery-1.11.1.min.js"></script><scriptsrc="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></body></html>

Theming

jQuery Mobile provides a theming framework that allows developers to customize color schemes and certain CSS aspects of UI features. Developers can use the jQuery Mobile ThemeRoller [8] application to customize these appearances and create branded experiences. After developing a theme in the ThemeRoller application, programmers can download a custom CSS file and include it in their project to use their custom theme. [9]

Each theme can contain up to 26 unique color "swatches," each of which consists of a header bar, content body, and button states. Combining different swatches allows developers to create a wider range of visual effects than they would be able to with just one swatch per theme. Switching between different swatches within a theme is as simple as adding an attribute called "data-theme" to HTML elements.

The default jQuery Mobile theme comes with two different color swatches, named "a" and "b". Here is an example of how to create a toolbar with the "b" swatch:

<divdata-role="header"data-theme="b"><h1>Page Title</h1></div>

(Source: from the jQuery Mobile website) [3]

There are already a handful of open source style themes that are developed and supported by third-party organizations. One such open source style theme is the Metro style theme that was developed and released by Microsoft Open Technologies, Inc. [10] The Metro style theme is meant to mimic the UI of the Metro (design language) that Microsoft uses in its mobile operating systems.

Mobile browser support

PlatformVersionNativePhone Gap Opera Mobile Opera Mini Fennec OzoneNet front
0.98.5, 8.659.5104.05.01.01.1*0.94.0
iOS v2.2.1AA
v3.1.3, v3.2AAA
v4-7.0AAA
Symbian S60 v3.1, v3.2AAAAACC
v5.0CCCACA
Symbian UIQ v3.0, v3.1C
8.65
C
v3.2CC
Symbian Platform v.3.0A
BlackBerry OS v4.5CCC
v4.6, v4.7CCCB
v5.0BACA
v6.0AAA
Android v1.5, v1.6AA
v2.1AA
v2.2AAA*C*A*
Windows Mobile v6.1CCCCBCBC
v6.5.1CCCAACA
v7.0AACA
webOS 1.4.1AA
bada 1.0A
Maemo 5.0BBCB*
MeeGo 1.1*A*A*A*

Key:

(Source: from the jQuery Mobile website) [3]

Release history

Release dateVersion number
October 16 2010 1.0.0 Alpha 1
November 12, 2010 1.0.0 Alpha 2
February 4 2011 1.0.0 Alpha 3
March 31 2011 1.0.0 Alpha 4
April 7 2011 1.0.0 Alpha 4.1
June 20 2011 1.0.0 Beta 1
August 3 2011 1.0.0 Beta 2
September 8 2011 1.0.0 Beta 3
September 29 2011 1.0.0 RC1
October 19 2011 1.0.0 RC2
November 13 2011 1.0.0 RC3
November 16 2011 1.0.0
January 26 2012 1.0.1
February 28, 2012 1.1.0 RC1
April 6, 2012 1.1.0 RC2
April 13, 2012 1.1.0
June 28, 2012 1.1.1 RC1
July 12, 2012 1.1.1
August 1, 2012 1.2.0 Alpha
September 5, 2012 1.2.0 Beta
September 14, 2012 1.2.0 RC1
September 21, 2012 1.2.0 RC2
October 2, 2012 1.2.0
January 14, 2013 1.3.0 Beta
February 4, 2013 1.3.0 RC1
February 20, 2013 1.3.0
March 19, 2013 1.1.2
March 22, 2013 1.2.1
April 10, 2013 1.3.1
July 19, 2013 1.3.2
July 25, 2013 1.4.0 Alpha 1
August 15, 2013 1.4.0 Alpha 2
September 24, 2013 1.4.0 Beta 1
October 24, 2013 1.4.0 RC 1
December 23, 2013 1.4.0
February 12, 2014 1.4.1
February 28, 2014 1.4.2
July 1, 2014 1.4.3
September 12, 2014 1.4.4
October 31, 2014 1.4.5 (Latest Stable Version)
January 3, 2017 1.5.0-alpha.1

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML document, choosing the appearance of a page, or jumping to positions in multimedia content.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

In a web browser, an access key or accesskey allows a computer user to immediately jump to a specific web page via the keyboard. They were introduced in 1999 and quickly achieved near-universal browser support.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least 3 to 4 times more usage than any other JavaScript library.

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Apache Cordova is a mobile application development framework created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open-source version of the software called Apache Cordova. Apache Cordova enables software programmers to build hybrid web applications for mobile devices using CSS3, HTML5, and JavaScript, instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It enables the wrapping up of CSS, HTML, and JavaScript code depending on the platform of the device. It extends the features of HTML and JavaScript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application nor purely Web-based. They are not native because all layout rendering is done via Web views instead of the platform's native UI framework. They are not Web apps because they are packaged as apps for distribution and have access to native device APIs. Mixing native and hybrid code snippets has been possible since version 1.9.

jQT is an open-source Zepto/ JQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1 (Android), and Palm Pre. It enables programmers to develop mobile applications with a native look and feel for the target device using HTML, CSS, and JavaScript.

jQuery UI is a collection of GUI widgets, animated visual effects, and themes implemented with jQuery, Cascading Style Sheets, and HTML. Using the Shodan search engine query term cpe:"cpe:/a:jquery/jquery_ui" we can determine that jQuery UI is used on approximately 800k web sites. Pinterest, PayPal, IMDb, The Huffington Post, and Netflix are utilizing the library.

<span class="mw-page-title-main">Holy grail (web design)</span> CSS programming trick for dividing a web page into three columns

The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

Foundation is a free responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

HTML5 Article is a HTML5 semantic element, similar to <section> and <header>. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.

jQWidgets Software framework

jQWidgets is a software framework with widgets, themes, input validation, drag & drop plug-in, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support. It is built on the open standards and technologies HTML5, CSS, JavaScript and jQuery. This library is used for developing responsive web and mobile applications. Some developers consider jQWidgets one of the top alternatives to the open-source jQuery UI.

References

  1. jQuery Foundation - jquerymobile.com (2010-10-16). "jQuery Mobile Alpha 1 Released". blog.jquerymobile.com. Retrieved 2014-05-22.
  2. jQuery Foundation - jquery.org (2012-09-10). "jQuery Licensing Changes". Blog.jquery.com. Retrieved 2013-10-09.
  3. 1 2 3 4 "Mobile Graded Browser Support".
  4. "The Global Rise of the Smartphone".
  5. "Resons why jQuery Mobile Is Suitable For Mobile Web App Development".
  6. "IBM Worklight - United States". Worklight.com. Retrieved 2013-10-09.
  7. "jQuery maintainers continue modernization initiative with deprecation of jQuery Mobile". jQuery Blog. Retrieved 6 December 2022.
  8. "ThemeRoller".
  9. "JQuery Mobile Theming Overview".
  10. "More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile". Archived from the original on 2014-08-16.

Further reading