Jan 07 2011

How to start with jQuery mobile

by vikas

In month of Oct-10, I had posted about "Wow!!! We have jQuery Mobile now" and after that about First release of jQuery mobile. Till now, 1.0 alpha 2 is released. So now days I am trying my hands on jQuery mobile. In this post, I will show you how to get started with jQuery mobile. To start with jQuery mobile, First we need to understand the page structure that is required for jQuery mobile.

Related Post:

To get full advantage of jQuery mobile, we need to use HTML 5.

<!DOCTYPE html>

Now in the head section, give reference of jQuery mobile js and its css.

<head> 
 <title>Page Title</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>

Inside the body tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute:

<div data-role="page">
</div>

Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header", "content", and "footer".

<div data-role="header">
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>

Putting is all together then this is how it looks.

<!DOCTYPE html>
<html>
<head> 
 <title>Page Title</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">
  <h1>Page Title</h1>
   </div>

   <div data-role="content"> 
  <p>Page content.</p>  
   </div>

   <div data-role="footer">
  <h4>Page Footer</h4>
   </div>

  </div>
</body>
</html>

That's it. Now when you run your page, this is how it will look in the browser.

See live Demo and Code.

Keeping visiting for some more post about jQuery mobile.

Feel free to contact me for any help related to jQuery. I will gladly help you.


Responsive Menu
Add more content here...