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 Demo
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.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 Demo
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 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 Demo
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>
Transitions Demo 
cool :)
ReplyDeleteIt's very true that the future of the web is mobile. Nice start for me, thanks! :)
ReplyDeletenice..good for beginner.. :)
ReplyDeleteIt's is good and helpful tutorial for beginner developers........
ReplyDeleteI find jQuery mobile very sluggish on mobiles for some reason... All in all though,its a brilliant framework :)
ReplyDeleteGreat I like it :)
ReplyDeletereally interesting...
ReplyDeleteNon of this works on Internet Explorer and on Mobile phone. No css detected...
ReplyDeletenice. I started using the section tag for pages and header/footer tags inside that
ReplyDeleteGood plugin but another problem is size.
ReplyDeleteIf 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
ReplyDeleteExcelente , yo ya lo habia probado muy bueno aqui pueden ver una demo con php:
ReplyDeletehttp://softfull.net/movil/index.php
Nice srinivas!!! I was expecting this long time... Great work you have done!! Keep doing!!
ReplyDeleteTransitions demo is not working!! Please look into that.. thanks.. Jagan
ReplyDeleteI like your tutorials.
ReplyDeleteThanks, Very useful tutorial for beginner.
ReplyDeleteGood start for beginners!
ReplyDeleteNice Post... I have used concept in google app engine .
ReplyDeleteJQuery Mobile Framework make mobile more attractive & give it uniqueness.
ReplyDeleteJ Quary Mobile Frame work is giving its best in market.
ReplyDeleteNice 1
ReplyDeleteGreat post.
ReplyDeleteThanks 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/
ReplyDeleteVery nice and compact tutorial. Thank you for putting it together!
ReplyDeleteCan't show in IE!
ReplyDeleteI am facing problem i have converted my wap site using jquery mobile framework... now im facing if i click on any content link page invisible.. it get visible only if i refresh page. how to fix this problem
ReplyDeletethanks, this stuff is usefull :)
ReplyDeleteGreat app, i like it very much!
ReplyDeletenice article.. :D
ReplyDeletethanks..
Thanks for tutorial
ReplyDeletenice tutorial and simply super.......
ReplyDeleteThanks
ReplyDeleteThanks, this stuff is usefull :)
ReplyDeletethis tutorial is work on asp.net web forms???
ReplyDeletewaw this amazing, i know this place good for tutorial. I hope this web always many traffic
ReplyDeletethanks for share knowledge
Thanks for article.
ReplyDelete
ReplyDeleteThanks, Very useful tutorial for beginner.
Hello Ravi, I very interesting about jquery because I still learn very basic jquery. anyway I will try adopt your jquery code to my html website and make report soon.
ReplyDeleteThanks Ravi
nice info thanks
ReplyDelete