jQuery Mobile: Up and Running

Chapter 2. Starting with the Framework

Preparing the Document

Let’s get our hands dirty and create the typical jQuery Mobile webapp template.

Requirements

Our HTML5 document needs to include:

• The jQuery core JavaScript file

• The jQuery Mobile core JavaScript file

• The jQuery Mobile core CSS file

• The jQuery Mobile theme CSS file (optional)

In addition, jQuery Mobile will use a series of PNG files for some of the UI but we don’t need to explicitly link them. There is also a version of the CSS file that includes both the core file and the default theme.

Before coding, our first decision is about resources’ hosting. There are two approaches:

• Host all the files within our project

• Use a CDN (Content Delivery Network)

Hosting the Files

If you want to host all the files with your webapp, you need to download the latest ZIP package from http://jquerymobile.com/download. The ZIP name will include the version of the framework, for example: jquery.mobile-1.0.zip.

The jQuery Mobile package does not include the jQuery core. You need to also download it from http://jquery.com (production version is recommended).

In the jquery.mobile-XX.zip package, you will find the following structure:

• demos folder

• images folder

• jquery.mobile-XX.css

• jquery.mobile-XX.js

• jquery.mobile-XX.min.css

• jquery.mobile-XX.min.js

• jquery.mobile.structure-XX.css

• jquery.mobile.structure-XX.min.css

XX will be the version number, including release type, for example: 1.1b1 for 1.1 Beta 1, 1.0rc2 for 1.0 Release Candidate 2, or 1.0 for 1.0 final ...