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.
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>
<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>
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>
Transition Animation
You can give transition animation while switching between pages. data-transition attribute is used to define a transition
No comments:
Post a Comment