Single page template in JQuery mobile

 The following code is simple example for creating mobile pages using JQuery mobile. For developing JQuery mobile pages you needs to include the jquerymobile.css, jquerymobile.js and jquery.js files. You can able to download these file from jquery site. This is my single page template.

<!DOCTYPE html>
<html>
<head>
       <meta charset="ISO-8859-1">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>JQuery Mobile Single Page Template</title>
       <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>
       <link rel="stylesheet" type="text/css"  href="css/themes/default/jquery.mobile-1.1.0.css" />
</head>
<body>
       <div data-role="page">
              <div data-role="header">
                     <h3>Header</h3>
              </div>
              <div data-role="content">
                     <p>Page main content goes here..!</p>
              </div>
              <div data-role="footer">
                     <h5>Footer</h5>
              </div>
       </div>
</body>
</html>

Now preview this page using chrome or safari you can able to get the result like this.



You can download this example here.

Comments