A First Example

Contact Us or call 1-877-932-8228
A First Example

A First Example

Let's take a first look at some code. When viewed on a smartphone, the page WhatIsjQueryMobile/Demos/helloworld/index.html looks something like this:

screenshot: Hello World on an iPhone

Open the page in a desktop browser and with a smartphone or emulator. Open up the page in a file editor, too, to check out the code.

Code Sample:

<!DOCTYPE html>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery Mobile: Hello World</title>
		<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>
		<!-- the "page" div is the basic unit of jQuery Mobile - a page for the user -->
		<div data-role="page">
			<!-- this is a header, appearing at the top of the page -->
			<div data-role="header" data-position="inline">
				<h1>Hello World</h1>
			<div class="ui-content" role="main">
				<p>A first jQuery Mobile page.</p>
				<!-- this is a button -->
				<a href="http://api.jquerymobile.com/" class="ui-btn">Home</a>

Code Explanation:

While we'll get into lots more detail about code later in this course, we can point out a few things now. First, note that the page is a valid HTML5 document. The DOCTYPE is html. Some divs on the page make use of the HTML5 data attribute. The outermost div, for instance, has attribute data-role="page", which is significant for jQuery Mobile; we'll learn later in the course about divs as pages.

Second, note that the page links to some external resources - the two JavaScript files and one stylesheet are hosted at code.jquery.com, with nothing other than "index.html" on our end.

Let's check jQuery Mobile's progressive enhancement features. Consider the following two screenshots, each showing WhatIsjQueryMobile/Demos/helloworld/index.html in Google Chrome on a Mac:

screenshot of index.html with and without JavaScript

The top screenshot, with JavaScript on, shows a page similar to the smartphone view. The bottom screenshot shows that the page still works without JavaScript enabled: some of the styling is different, but the content is visible and the link works for users who don't have, or who have turned off, JavaScript.

Let's take a look at a quick first example - open up WhatIsjQueryMobile/Demos/html5/index.html in a browser and in your file editor to inspect the code. From a desktop browser you'll see something like this:

Basic HTML5 page

Code Sample:

<!doctype html>
   <title>A Simple Document</title>
    <h1>Site Title</h1>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>

      <h1>Page Title</h1>
      <p>Content content content</p>
    <p>Sidebar info goes here</p>
  <footer>Footer content here</footer>

Code Explanation:

Presentationally, the page is less than stunning when viewed in a browser - we've not styled the elements at all - but the interesting bits are how we've marked up the content. Firstly, note that we've declared a doctype of html - this fact alone means this page is an HTML5 document.

Secondly, note that we have made use of the HTML5 semantic tags to imply meaning to the content we markup for viewing on the web:

  1. A header tag wraps the header of the page.
  2. The main navigation items are wrapped with a nav tag.
  3. An article tag wraps the main content, while an aside tag wraps the sidebar content.