What is Mobile jQuery?
jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions.
For making a simple Mobile jQuery application you need to include some js and CSS files of Mobile jQuery in the head section of the HTML page.
You need to include the following files:
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
A Mobile jQuery page is divided into the following three sections:
You can make multiple pages in a single HTML page and you can differentiate it with ids.
You can define a page with the data-role="page" attribute. In that page you can divide the page into the following three parts:
- For Header: data-role="header" attribute
- For Content: data-role="content" attribute
- For Footer: data-role="footer" attribute
Please refer to the following example for a better understanding.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>
My Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>
Hello world</p>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</html>
Note: Everything in Mobile jQuery is defined by a data-role attribute.
What Viewport is and why to use it
By setting the viewport attributes to content="width=device-width, initial-scale=1", the width will be set to the pixel width of the device screen. If we do not define that then the page will open the same way as in the Desktop. The following code will take the width of the device and render the website depending on that:
<meta name="viewport" content="width=device-width, initial-scale=1">
Note: If your body contains no data-role="page" divs then jQuery Mobile wraps the entire contents of the body within a page div as explained above. jQuery Mobile is using jQuery's wrapAll() method to do this that looks for any script tags inside the content being wrapped, and loads each script source via XHR. If scripts are present in the body then the browser ends up loading them twice. We therefore strongly recommend that jQuery Mobile documents with scripts in their body also contain a div with data-role="page".
Data Title Attribute
If you have multiple pages and you want to provide the same data title of every page then you need to use the data-title attribute for that.
<div data-role="page" id="foo" data-title="Page Foo">
</div>
Linking Pages
If you want to link the page in the same domain as normal then you can link the pages with ids and if you want to open a page of another domain then you need to use the rel="external" attribute.
This attribute allows you to open the page of the other domain.
Page transitions
The jQuery Mobile framework includes the following set of CSS-based transition effects that can be applied to any page link:
- Fade
- Pop
- Flip
- Turn
- Flow
- Slidefade
- Slide
- Slideup
- Slieddown
- None
Page Loading Widget
If you want to show a default message and show only images and want to apply various themes then you can use the following script for that.
<script>
$(document).on("click", ".show-page-loading-msg", function () {
var $this = $(this),
theme = $this.jqmData("theme") || $.mobile.loader.prototype.options.theme,
msgText = $this.jqmData("msgtext") || $.mobile.loader.prototype.options.text,
textVisible = $this.jqmData("textvisible") || $.mobile.loader.prototype.options.textVisible,
textonly = !!$this.jqmData("textonly");
html = $this.jqmData("html") || "";
$.mobile.loading('show', {
text: msgText,
textVisible: textVisible,
theme: theme,
textonly: textonly,
html: html
});
})
.on("click", ".hide-page-loading-msg", function () {
$.mobile.loading('hide');
});
</script>
I uploaded one mobile jQuery example where all the preceding features are implemented. Please go through the examples so you can better understand the features and attributes of HTML5 and the Mobile jQuery.