Here is the code to setup the basic one page application.
<!DOCTYPE html> <!-- HTML5 doctype -->
<html lang='en'>
<head>
<meta charset='utf-8'>
<!-- viewport for mobile browser -->
<meta content='width=device-width, minimum-scale=1, maximum-scale=1' name='viewport'>
<title>Project</title> <!-- change to project title here -->
<link href='vendors/jquery.mobile-1.3.2.min.css' rel='stylesheet'>
<link href='app.css' rel='stylesheet'>
</head>
<body>
<div data-role='page' id='root'>
<div data-role='header'>
<h1>Project</h1>
</div>
<div data-role='content'>
<!-- content here -->
</div>
</div>
<!-- JavaScript at the bottom -->
<script src='vendors/jquery-2.0.3.js'></script>
<script src='vendors/jquery.mobile-1.3.2.js'></script>
<script src='app.js'></script>
</body>
</html>
The <viewport> line makes sure the result looks like an app without zooming.
<meta content='width=device-width, minimum-scale=1, maximum-scale=1' name='viewport'>
If we want to make the result ‘more web’, then we may not restrict the zooming, as shown in the following.
<meta content='width=device-width' name='viewport'>
Note: For online editor: In jsfiddle or CodePen, we don’t need to write the <body> and <head> tag. So our HTML becomes:
<div data-role='page' id='root'>
<div data-role='header'>
<h1>Website Title</h1>
</div>
<div data-role='content'>
<p>Content goes here.</p>
</div>
</div>
A page is a div tag with data-role='page'. Usually we give ID to page because we need to refer to that page in order to link to it.
Page in jQuery Mobile is not a file of web page. It’s a concept. All the jQuery mobile pages are usually placed in one HTML document.
Note: the data-* attribute allows us to attach custom data to specific DOM element
Similar to the page, header is also defined by data-role. The header is put on top as the title bar. It can contan a button on the left and one on the right.
By putting content inside the data-role='content' block, we allow jQuery mobile style the content correctly. Otherwise, margin or padding may look strange.
Note: The purpose of this article is to provide a quick start on making content-based website using jQuery mobile. I recommend checking out the official demo where is a good place to get started learing different parts of jQuery mobile.