Jquery mobile framework helps you to develop rich web-based mobile applications. In this tutorial, we explained basic things such as theme selection, library usage, design pages, page links, and Transition animations. Its very lightweight code, simple and flexible, it supports all popular smartphone and tablet platforms. Use it and enrich your mobile web applications.
Include jQuery Mobile libraries
The first step includes jQuery Mobile stylesheet and javascript files in your webpage in the header section.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>Designing Your webpage
jQuery mobile will work with normal HTML tags or HTML5 tags, but you need to add an attribute called data ( data-role, data-theme, etc.,) to your HTML tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Mobile | AskGif</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="a">
<h1>AskGif</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#"><h2>Google Plus Style Drag and Drop adding Groups</h2></a></li>
<li><a href="#"><h2>Getting Started with Adobe Flex</h2></a></li>
<li><a href="#"><h2>Facebook Wall Script 4.0 Release</h2></a></li>
<li><a href="#"><h2>Login with Google Plus OAuth</h2></a></li>
</ul>
</div>
<div data-role="footer">
<h3>www.AskGif.info</h3>
</div>
</div>
</body>
</html>Customizing single list item
You can customize your article row by adding some description and comment count. See the following code
<li>
<a href="http://www.AskGif.info/2011/09/google-plus-style-drag-and-drop-adding.html">
<h2>Google Plus Style Drag and Drop adding Groups</h2>
</a>
<p>Are you looking for Google plus style drag and drop adding friends in groups or circle. Google plus circle implementation so cool, same way I have tried similar user </p>
<span class="ui-li-count">55</span>
</li>Selecting theme styles
The data-theme attribute is used to select a theme for a particular element. You can use a, b, c, d, e values for date-theme. (According to the jquery mobile doc you can use data-theme will accept values a, b, c ... z, but it is still under development)
Linking between pages
Linking between pages can be done using simple anchor tags. Give unique id for container and give the same id in anchor href value.
<!-- Home Page -->
<div data-role="page" id="home">
<div data-role="header" data-theme="a">
<h1>AskGif</h1>
</div>
<div data-role="content">
Linking between pages.
<a href="#about_us" data-role="button" data-inline="true">About Us</a>
</div>
<div data-role="footer">
<h3>www.AskGif.info</h3>
</div>
</div>
<!-- About Us Page -->
<div data-role="page" id="about_us">
<div data-role="header" data-theme="a">
<h1>AskGif</h1>
</div>
<div data-role="content">
The page contains About Us<br/>
Go back to Home
<a href="#home" data-role="button" data-inline="true">Home</a>
</div>
<div data-role="footer">
<h3>www.AskGif.info</h3>
</div>
</div>
Transition Animation
You can give transition animation while switching between pages. data-transition attribute is used to define a transition
<a href="#slide" data-transition="slide">About Us</a>
