One page application

Here is the code to setup the basic one page application.

 1<!DOCTYPE html> <!-- HTML5 doctype -->
 2<html lang='en'>
 3  <head>
 4    <meta charset='utf-8'>
 5    <!-- viewport for mobile browser -->
 6    <meta content='width=device-width, minimum-scale=1, maximum-scale=1' name='viewport'>
 7    <title>Project</title> <!-- change to project title here -->
 8    <link href='vendors/jquery.mobile-1.3.2.min.css' rel='stylesheet'>
 9    <link href='app.css' rel='stylesheet'>
10  </head>
11  <body>
12    <div data-role='page' id='root'>
13      <div data-role='header'>
14        <h1>Project</h1>
15      </div>
16      <div data-role='content'>
17        <!-- content here -->
18      </div>
19    </div>
20
21    <!-- JavaScript at the bottom -->
22    <script src='vendors/jquery-2.0.3.js'></script>
23    <script src='vendors/jquery.mobile-1.3.2.js'></script>
24    <script src='app.js'></script>
25  </body>
26</html>

The <viewport> line makes sure the result looks like an app without zooming.

1<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.

1<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:

1<div data-role='page' id='root'>
2  <div data-role='header'>
3    <h1>Website Title</h1>
4  </div>
5  <div data-role='content'>
6    <p>Content goes here.</p>
7  </div>
8</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

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.

I explained how jQuery works with the data-role in jQuery mobile course.

What’s next? We’re going to take a look at “Link between pages”.

◀ Quick prototyping jquery mobile with online code editors Link between pages ▶

makzan.

One page application

Defining pages

Page header

Content

Makzan | Mobile web design | Table of Content