A Basic Page Template

Contact Us or call 1-877-932-8228
A Basic Page Template

A Basic Page Template

To start using jQuery Mobile, you'll need to include three files in your page:

  1. The jQuery JavaScript file.
  2. The jQuery Mobile JavaScript file.
  3. The jQuery Mobile CSS file.

Optionally, you might include a jQuery Mobile theme CSS file; more on this later.

You can either link to files you download from the jQuery Mobile website or link to files hosted on various Content Delivery Networks, or CDNs. To create a standalone jQuery web application you would need to download the files to your local site, as would also be true if you were hosting a site to be accessed by users without direct access to the internet. In other cases, using the CDN-hosted files makes the most sense: a network of high-speed servers delivers files very quickly and efficiently, and this strategy makes it easier for you to update to newer jQuery or jQuery Mobile file versions in the future.

Whichever strategy you choose, hosting the files on your own web server or linking to CDN-hosted files, be sure to choose the minified versions of the files for production use. The minification (the removal of spaces and line breaks) makes these files smaller and, thus, reduces download time.

Here is an example of the code that would live in the head section of your pages, showing links to CDN-hosted files:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

You could, if you wished, link the JavaScript and CSS files shown above in any web page and start making use of jQuery Mobile's functionality. Most of the time, however, you will want to structure the markup of your pages to conform to jQuery Mobile's conventions

Let's look at a first demonstration of some of these concepts. Nan & Bob's is a (fictional) small bookstore and cafe, located right in the middle of downtown. We have developed a mobile website for them - using jQuery Mobile, of course - that we'll be extending and enhancing throughout this course. The site will give users information about their store, their books, and their cafe.

Open the file GettingStartedjQuery/Demos/basicpagetemplate/index.html in a mobile browser and also in a file editor to check out the code. Not much there yet - the page looks something like this when viewed on a mobile device:

basic page template

Let's review the code:

Code Sample:

GettingStartedjQuery/Demos/basicpagetemplate/index.html

The doctype at the top of the page identifies this page as an HTML5 page. As discussed above, we link to (and thus get to use all the power of) jQuery and jQuery Mobile JavaScript and CSS files in the head of the document.

In the body of the page, you'll note that the content of the page is marked up by a div with the data-role="page" attribute. jQuery Mobile makes extensive use of HTML5 attributes, with data-role among the most important. This simple example displays only one page; we'll see soon that we can offer our users multiple pages as multiple html files or within one single file.

Within the page div, we see data-roles for header and footer - which are, unsurprisingly, the header and footer of this particular page.

Let's now get you started writing some code!

Next