Table of Content
One page application
Here is the code to setup the basic one page application.
<viewport> line makes sure the result looks like an app without zooming.
If we want to make the result ‘more web’, then we may not restrict the zooming, as shown in the following.
Note: For online editor:
In jsfiddle (or CodePen), we don’t need to write the
<head> tag. So our HTML becomes:
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.
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.
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”.