Developer(s) | The jQuery Team |
---|---|
Initial release | October 16, 2010 [1] |
Stable release | 1.4.5 / October 31, 2014 |
Preview release | 1.5.0-rc1 / September 10, 2018 |
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 |
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.
As of October 7, 2021 jQuery Mobile has been deprecated. [7]
(Source: from the jQuery Mobile website) [3]
$('div').on('tap',function(event){alert('element tapped ');});
$(document).ready(function(){$('.myList li').on('click touchstart',function(){$('.myDiv').slideDown('500');});});
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>
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.
Platform | Version | Native | Phone Gap | Opera Mobile | Opera Mini | Fennec | Ozone | Net front | ||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
0.9 | 8.5, 8.65 | 9.5 | 10 | 4.0 | 5.0 | 1.0 | 1.1* | 0.9 | 4.0 | |||
iOS | v2.2.1 | A | A | |||||||||
v3.1.3, v3.2 | A | A | A | |||||||||
v4-7.0 | A | A | A | |||||||||
Symbian S60 | v3.1, v3.2 | A | A | A | A | A | C | C | ||||
v5.0 | C | C | C | A | C | A | ||||||
Symbian UIQ | v3.0, v3.1 | C 8.65 | C | |||||||||
v3.2 | C | C | ||||||||||
Symbian Platform | v.3.0 | A | ||||||||||
BlackBerry OS | v4.5 | C | C | C | ||||||||
v4.6, v4.7 | C | C | C | B | ||||||||
v5.0 | B | A | C | A | ||||||||
v6.0 | A | A | A | |||||||||
Android | v1.5, v1.6 | A | A | |||||||||
v2.1 | A | A | ||||||||||
v2.2 | A | A | A* | C* | A* | |||||||
Windows Mobile | v6.1 | C | C | C | C | B | C | B | C | |||
v6.5.1 | C | C | C | A | A | C | A | |||||
v7.0 | A | A | C | A | ||||||||
webOS | 1.4.1 | A | A | |||||||||
bada | 1.0 | A | ||||||||||
Maemo | 5.0 | B | B | C | B* | |||||||
MeeGo | 1.1* | A* | A* | A* |
Key:
(Source: from the jQuery Mobile website) [3]
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.
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content 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 current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.
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.
The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.
jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, 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 three to four times more usage than any other JavaScript library.
HTML5 is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.
This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.
Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling 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, HuffPost, and Netflix are utilizing the library.
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.
DaVinci was a development tool produced by Incross, which aimed at creating HTML5 mobile applications and media content. It included a jQuery framework and a JavaScript library that enabled developers and designers to craft web applications designed for mobile devices with a user experience similar to native applications. Business applications, games, rich media content, such as HTML5 multi-media magazines, advertisements, and animation, may be produced with the tool. DaVinci was based on standard web technology – including HTML5, CSS3, and JavaScript.
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 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.
{{cite book}}
: CS1 maint: multiple names: authors list (link)