One page web application

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>

Defining pages

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

Page header

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.

Content

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.

One page web application

Defining pages

Page header

Content

Comments