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.

Ebook Download
View all
Learn
View all