Introduction to jQuery Mobile page structure

January 5, 2012 by Moe · Leave a Comment
Filed under: Mobile Development 

Jquery Mobile is cross platform and cross device framwork which makes it a lot easier to write your code once and distribute it through out multiple platform and device. It is HTML 5-based user interface for all mobile device platforms. Built on JQuery and JQuery UI foundation. This piece of HTML code is basic JQuery Mobile structure to introduce you to JQuery Mobile page. You can copy and paste this code into your favorite HTML editor and save it as index.html then open it in any browser. It looks different little bit from regular HTML page. It is more Mobile feeling when you look at it.

<!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">
  <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>
Share/Bookmark