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 table platforms. Use it and enrich your mobile web applications.
Download Script 
Live DemoDeveloper
Include jQuery Mobile libraries
The first step is include 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>
<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 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 | 9Lessons</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>9Lessons</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.9lessons.info</h3>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Mobile | 9Lessons</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>9Lessons</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.9lessons.info</h3>
</div>
</div>
</body>
</html>
Live DemoCustomizing 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.9lessons.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>
<a href="http://www.9lessons.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>
Customized List Item DemoSelecting 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 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 same id in anchor href value.<!-- Home Page -->
<div data-role="page" id="home">
<div data-role="header" data-theme="a">
<h1>9Lessons</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.9lessons.info</h3>
</div>
</div>
<!-- About Us Page -->
<div data-role="page" id="about_us">
<div data-role="header" data-theme="a">
<h1>9Lessons</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.9lessons.info</h3>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-theme="a">
<h1>9Lessons</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.9lessons.info</h3>
</div>
</div>
<!-- About Us Page -->
<div data-role="page" id="about_us">
<div data-role="header" data-theme="a">
<h1>9Lessons</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.9lessons.info</h3>
</div>
</div>
Linking Pages DemoTransition 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>
Transitions Demo 
cool :)
It's very true that the future of the web is mobile. Nice start for me, thanks! :)
nice..good for beginner.. :)
It's is good and helpful tutorial for beginner developers........
I find jQuery mobile very sluggish on mobiles for some reason... All in all though,its a brilliant framework :)
Great I like it :)
really interesting...
Non of this works on Internet Explorer and on Mobile phone. No css detected...
nice. I started using the section tag for pages and header/footer tags inside that
Good plugin but another problem is size.
If you make website for mobile you should remove all not important scripts if not website can be load very slow. In my website about 15% users use mobile phone.
IE is dead
Excelente , yo ya lo habia probado muy bueno aqui pueden ver una demo con php:
http://softfull.net/movil/index.php
Nice srinivas!!! I was expecting this long time... Great work you have done!! Keep doing!!
Transitions demo is not working!! Please look into that.. thanks.. Jagan
I like your tutorials.
Thanks, Very useful tutorial for beginner.
Good start for beginners!
Nice Post... I have used concept in google app engine .
JQuery Mobile Framework make mobile more attractive & give it uniqueness.
J Quary Mobile Frame work is giving its best in market.
Nice 1
Great post.
Thanks for the pain you had taken to keep us updated.
Hi, guys! Thanks for useful information! We`ve also posted jQuery Mobile – Beginner Tutorial your readers might also like: http://www.learncomputer.com/jquery-mobile-beginner-tutorial/
Very nice and compact tutorial. Thank you for putting it together!