Creating a Website Using JQuery Mobile, Part 1

event-website-home-actual In this tutorial I will show you how to build a website with JQuery Mobile. In this first part of the tutorial I will explain the site’s characteristics, and I will implement the home page of the site.

The Event Website

The website will advertise a fictional event, and it will consist of four distinct pages:

Home
Speakers
Schedule
Information

The site’s map would be something like this:

Let’s take a look at the wireframes for each page.

The Event’s Home Page

The Home page will have a toolbar, a banner and four buttons linking to different areas of the site.

The Speakers, Schedule and Information buttons are pretty self-explanatory. I will leave the implementation of the registration page as an exercise for you.

The Speakers Page

This page will host the list of speakers participating in the event. Each item of the list will display the speaker’s name, picture and short bio.

This page will also host a "Home" button linking back to the Home page.

The Schedule Page

The Schedule page will contain the list of event sessions. Each list item will display the session’s name, time, location, description and a picture of the speaker.

Along with a button linking to the Home page, the page’s toolbar will contain a set of buttons representing each of the event’s days. Pushing any of these buttons will display the sessions for the selected day.

The Information Page

The last page of the site is the Information page. This page will display a picture and a description of the venue, along with a list of hotels, their descriptions and rates.

How JQuery Mobile Pages Work

JQuery Mobile’s site explains in detail the anatomy of a JQuery Mobile page. It is recommended that you start your pages with a boilerplate template like this:

<!DOCTYPE html>
<html>
	<head>
	<title>Page Title</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /header -->
</div><!-- /page -->

</body>
</html>

The data-role=”page” attribute on the outer div element designates that div as a mobile page. Similarly, the “header”, “content” and “footer” data roles designate the header, content and footer areas of the page respectively.

To build your mobile sites using JQuery Mobile you can use one or multiple html files, each containing one or more mobile “pages”.

jquery-mobile-pagesl As you already know, for this tutorial I will take the multiple files approach, with each html file will hosting a single mobile page.

Creating the Home Page

Now that you have an idea of how things are going to look, let’s build the Home page.

Using the boilerplate page template, I first need to include the JQuery and JQuery Mobile resources at the top of the file like so:

<head>

    <link rel="stylesheet" type="text/css" href="../jquery-mobile/jquery.mobile-1.0a2.css" />
    <link rel="stylesheet" type="text/css" href="css/event.css" />
    <script src="../jquery-mobile/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../jquery-mobile/jquery.mobile-1.0a2.js" type="text/javascript"></script>

Notice that I also included event.css, which is the file where I will put the styles for the site.

In the body of the html file I will create a single mobile “page” containing the header, banner and buttons like so:

<div data-role="page">
    <div data-role="header">
        <h1>
            Welcome!</h1>
    </div>
    <div data-role="content">
        <div id="banner">
            <h2>
                Mobile Dev 2011</h2>
        </div>
        <p>
            The best mobile development conference is here!</p>
        <p>
            Learn how to build productivity, utility and immersive mobile applications.</p>
        <p>
            Use web-based and native platforms to create amazing applications for mobile devices.
        </p>
        <ul data-role="listview" data-inset="true">
            <li><a href="./register.html">Register</a>
            <li><a href="./speakers.html">Speakers</a>
            <li><a href="./schedule.html">Schedule</a>
            <li><a href="./information.html">Information</a>
        </li></ul>
    </div>
</div>

This is how the page looks:

event-website-home-actual

Following JQuery Mobile’s conventions, inside the body tag I identified the mobile "page" using a div element with the data-role="page" attribute. The div with data role of “header” will be the header of the page. And adding the data role “listview” to the ul element will cause each li element containing a link to behave like a button:

event-website-home-listview

Next Steps

We now have the Home page ready. In the next installment of this series I will build the Speakers page. Sounds good?