Getting started with jQuery Mobile
JQuery mobile provides set of features which are supported on almost all smartphones such as touch UI, ajax navigation, animated page transitions. Building jQuery mobile page is very simple, here’s how:
- A jQuery Mobile site must start with an HTML5 ‘doctype’ to take full advantage of all of the framework’s features.
- First of all you need jQuery, jQuery mobile, mobile theme stylesheets from CDN.
- Reference all styles & scripts in the head of page.
- A meta viewport tag in the head sets the screen width to the pixel width of the device.
- Inside body of html page a div with data-role of page is used as a wrapper for whole page.
- For header bar add a div with data-role of header.
- For content region add a div with a data-role of content & add content between this div.
- There are many features provided by jQuery mobile. Here i am explaining one of them which is list. For list, simply add ul tag with attribute data-role of listview between
. - To make it look like an inset module add an attribute data-inset=”true”.
- For dynamic search filter just add another attribute data-filter=”true”.
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.css"/>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>[/html]
[html]<body>
<div data-role="page">
<div data-role="header">
Header
</div>
<div data-role="content">
<p>This is jquery mobile test page</p>
</div>
<div data-role="footer">
©intelligrape
</div>
</div>
</body>
[/html]
[html]
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Blue</li>
<li>Black</li>
<li>Green</li>
<li>Yellow</li>
<li>White</li>
</ul>
</div>
[/html]
Very good post.Thanks Again. Cool.
Really informative post.Really thank you! Much obliged.