How to start with jQuery mobile

In month of Oct-10, I had posted about "Wow!!! We have jQuery Mobile now" and after that about First release of jQuery mobileTill 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.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..