jQuery Mobile
 | |
| Developer(s) | The jQuery Project |
|---|---|
| Initial release | October 16, 2010[1] |
| Stable release | 1.4.5
/ October 31, 2014 |
| Repository | |
| Written in | JavaScript |
| 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), more specifically a JavaScript library, currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers,[3] made necessary by the growing but heterogeneous tablet and smartphone market.[4] The jQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight[5] and more.
Features
- Compatible with all major desktop browsers as well as all major mobile platforms, including Android, iOS, Windows Phone, Blackberry, WebOS, Symbian, and more.
- Built on top of jQuery core so it has a minimal learning curve for people already familiar with jQuery syntax.
- Theming framework that allows creation of custom themes.
- Limited dependencies and lightweight to optimize speed.
- The same underlying codebase will automatically scale to any screen.
- HTML5-driven configuration for laying out pages with minimal scripting.
- AJAX-powered navigation with animated page transitions that provides ability to create semantic URLs through pushState.
- UI widgets that are touch-optimized and platform-agnostic.
(Source: from the jQuery Mobile website) [3]
Example usage
$('div').on('tap', function(event){
alert('You tapped an element');
});
$(window).load(function() { // better to use $(document).ready(function(){
$('.List li').on('click touchstart', function() {
$('.Div').slideDown('500');
});
A basic example
Every web project using jQuery Mobile is more or less built using the following code. 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).
The body contains divs with an attribute of "data-role". This attribute, via jQuery Mobile, defines the look and function of the div. A div with the data-role "page", for example, represents a screenful of content in the web project. A "page" can have divs defined by data-roles of "header", "content", and "footer" (but not necessarily - any HTML is allowed within the "page" div).
One HTML document can contain more than one "page" 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>
<title>Page Title</title>
<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
</head>
<body>
<div data-role="page" id="first" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Page Header 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello, world!</p>
<a href="#second" data-role="button" data-inline="true" data-transition="flip" data-icon="carat-r" data-iconpos="right">Go to second page</a>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer 1</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>Page Header 2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer 2</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</body>
</html>
Theming
jQuery Mobile provides a powerful theming framework that allows developers to customize color schemes and certain CSS aspects of UI features. Developers can use the jQuery Mobile ThemeRoller[6] application to customize these appearances and create highly 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.[7]
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:
<div data-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.[8] 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
| 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:
- A - High Quality. A browser that’s capable of, at minimum, utilizing media queries (a requirement for jQuery Mobile). These browsers will be actively tested against, but may not receive the full capabilities of jQuery Mobile.
- B - Medium Quality. A capable browser that doesn’t have enough market share to warrant day-to-day testing. Bug fixes will still be applied to help these browsers.
- C - Low Quality. A browser that is not capable of utilizing media queries. They will not be provided any jQuery Mobile scripting or CSS (falling back to plain HTML and simple CSS).
- * - Upcoming browser. This browser is not yet released but is in alpha/beta testing.
(Source: from the jQuery Mobile website) [3]
Release history
See also
References
- ^ jQuery Foundation - jquerymobile.com (2010-10-16). "jQuery Mobile Alpha 1 Released". blog.jquerymobile.com. Retrieved 2014-05-22.
- ^ jQuery Foundation - jquery.org (2012-09-10). "jQuery Licensing Changes". Blog.jquery.com. Retrieved 2013-10-09.
- ^ a b c d "Mobile Graded Browser Support".
- ^ "The Global Rise of the Smartphone".
- ^ "IBM Worklight - United States". Worklight.com. Retrieved 2013-10-09.
- ^ "ThemeRoller".
- ^ "JQuery Mobile Theming Overview".
- ^ "More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile".
Further reading
- Doyle, Matt (March 18, 2014). Master Mobile Web Apps with jQuery Mobile (4th ed.). Elated Books. p. 567. ISBN 978-0-9873115-3-5.
- Pelletier, Jeff (April 25, 2013). Mobile App Manual: The Blueprint (1st ed.). Withinsight Publishing. p. 96. ISBN 978-0989072106.
- Bai, Giulio (June 23, 2011). jQuery Mobile First Look (1st ed.). Packt Publishing. p. 216. ISBN 1-84951-590-5.
- Reid, Jon (July 7, 2011). jQuery Mobile (1st ed.). O'Reilly Media. p. 130. ISBN 1-4493-0668-3.
- David, Matthew (September 21, 2011). HTML5 Mobile Websites: Turbocharging HTML5 with jQuery Mobile, Sencha Touch, and Other Frameworks (1st ed.). Focal Press. p. 250. ISBN 0-240-81813-X.
- Broulik, Brad (November 30, 2011). Pro jQuery Mobile (1st ed.). Apress. p. 350. ISBN 1-4302-3966-2.
- Holzner, Steven E. (January 2, 2012). Sams Teach Yourself jQuery Mobile in 10 Minutes (1st ed.). Sams. p. 240. ISBN 0-672-33557-3.
- Firtman, Maximiliano (January 31, 2012). jQuery Mobile: Up and Running (1st ed.). O'Reilly Media. p. 250. ISBN 1-4493-9765-4.
- Dutson, Phil (July 13, 2012). Sams Teach Yourself jQuery Mobile in 24 Hours (1st ed.). Sams. p. 475. ISBN 0-672-33594-8.
- de Jonge, Adriaan, Dutson, Phillip (November 2, 2012). jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples (1st ed.). Addison-Wesley Professional. p. 400. ISBN 978-0-321-82208-6.
{{cite book}}: CS1 maint: multiple names: authors list (link)