Table of Content
jQuery project boilerplate
At the end, we will have a starter kit for our future jQuery mobile app example. If you just want the starting point, you can download the starter kit and skip this page.
We will use the latest jQuery 2.x stable version. For development purpose, we will use the uncompressed version.
At the time of writing, the jQuery file is
For jQuery Mobile, we need the JS file / CSS styling file and the images for icons.
Then we prepare two empty files —
And at last, we create an
index.html file as the entry point.
At this point, we should have the following file structure.
And here is the screenshot of the current stage.
Before going further, let’s take a look at the
It is an HTML5 document. We know that by the DOCTYPE.
In the head, we have the following meta tag to make the HTML rendering fits the mobile device’s width.
width=device-width tells the browser engine to follow the real devise width instead of using a fake one. Why would the browser use something other than the device with? It is because it wants to present the traditional desktop website in an overview:
But when we visit website that set the
width=device-width, we get the webpage rendered fitting the device width.
In most cases, jQuery mobile is a single webpage app. That means all the views we need is in the index.html file. jQuery uses <div> tag with
data-role=page as a full screen page.
In each page div, we defile an ID so we can reference and link to the page later.
data-*attribute. The most obvious one is the
data-rolewhich tells jQuery mobile how this block of content should be presented. Is it a full screen container? Is it a header with dark background? Or a footer placed at the bottom?
Inside each page, we can have header, content and footer. And they are defined by
- At the beginning we describe the role of each key elements and the related options via the
- The final result is our elements with additional classes attached with their theme style.
This is just a quick to setup our boilerplate project file. These files will be used as the starting point in most future examples.
What’s next? We’re going to take a look at “Project 1 – Twenty Five Timer”.