|
JQuery Mobile
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] 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 exampleWhat 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 One HTML document can contain more than one In the example below, two other data- attributes are used. The Lastly, icons can be added to elements via the 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>
<meta charset="utf-8">
<title>jQuery Mobile Example</title>
<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<section data-role="page" id="first" data-theme="a">
<header data-role="header" data-position="fixed">
<h1>Page 1 Header</h1>
</header>
<article role="main" class="ui-content">
<h2>Hello, world!</h2>
<a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right">Go to Page 2</a>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Page 1 Footer</h4>
</footer>
</section>
<section data-role="page" id="second" data-theme="b">
<header data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>Page 2 Header</h1>
</header>
<article role="main" class="ui-content">
<h2>Example Page</h2>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Page 2 Footer</h4>
</footer>
</section>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
ThemingjQuery 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: <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.[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
Key:
(Source: from the jQuery Mobile website)[3] See also
References
Further reading
External links
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
