In this tutorial I shall explain the basics of jQuery Mobile.
Let us see how to make a sample Website with Jquery Mobile.
<!DOCTYPE
html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"
/>
<script
src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div
data-role="page"
id="home">
<div
data-role="header"
data-theme="b">
<h1>Home</h1>
</div>
<div
data-role="content">
<p><a
href="#about"
data-transition="slide">About
this app</a></p>
</div>
</div>
<div
data-role="page"
id="about">
<div
data-role="header"
data-theme="e">
<h1>About
This App</h1>
</div>
<div
data-role="content">
<p>This
app rocks!</p>
</div>
</div>
</div>
</body>
</html>
Copy paste this code in a
notepad save it as an html file. Try opening it in a Chrome browser.
Amazing rite. Without
writing any complex code you could set up the navigations and themes.
Added reference to jquery mobile css,jquery and the jquery mobile js files.
Join the conversation! Your thoughts help the community grow.