Basics of jQuery Mobile

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.

image1.jpg

Added reference to jquery mobile css,jquery and the jquery mobile js files.