Over a million developers have joined DZone.

Creating a Website Using JQuery Mobile, Part 3

· Mobile Zone

JQuery Mobile is a great UI framework for developing mobile applications, which works by applying progressive enhancements to your clean, semantic HTML, and transform it into rich user interfaces.

In this series I have been showing you how to quickly put together a fictional event website using JQuery Mobile. I have saved the construction of the last two pages, event Schedule and Information, for this article.

The Schedule Page

Below is how I need the Schedule page to look. (Notice that it is simpler than the original version in the first part of this series.)

I will again use JQuery Mobile’s standard boilerplate page template as a reference, adding HTML elements for the leading text and the list of sessions:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Schedule</title>
    <link href="../jquery-mobile/jquery.mobile-1.0a2.css" rel="stylesheet" type="text/css" />
    <link href="css/event.css" rel="stylesheet" type="text/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>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>
                Schedule</h1>
        </div>
        <div data-role="content">
            <div id="banner">
                <h2>
                    Mobile Dev 2011</h2>
            </div>
            <p>
                There has never been a more exciting time to be a mobile developer. We have one
                full day of mobile development awesomeness for you!</p>
            <ul data-role="listview" data-inset="true">
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Keynote</h3>
                        <p class="session-time-speaker">
                            9:00 AM - 9:30 AM  Speaker B</p>
                        <p>
                            Short introduction to keynote.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 2</h3>
                        <p class="session-time-speaker">
                            10:00 AM - 10:55 AM  Speaker D</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 3</h3>
                        <p class="session-time-speaker">
                            11:00 AM - 12:00 AM  Speaker A</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Lunch</h3>
                        <p class="session-time-speaker">
                            12:00 PM - 1:30 PM</p>
                        <p>
                            Talk about luch here.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 4</h3>
                        <p class="session-time-speaker">
                            1:30 PM - 3:00 PM  Speaker C, Speaker B</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 5</h3>
                        <p class="session-time-speaker">
                            3:15 PM -  4:30 PM  Speaker C, Speaker B</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

 

  

I am using an unordered list to display the sessions, as I did to display the speakers in the Speakers page. Following the philosophy of progressive enhancements, the framework takes care of transforming the list into a mobile-friendly list view. I only need to worry about the HTML template used within each li element.

This is how the page looks:

The Information Page

The Information page is where I will display the details about the event’s venue, hotels and transportation:

I will keep this page as simple as possible. You can grab the source code and embellish the page as you see fit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Information</title>
    <link href="../jquery-mobile/jquery.mobile-1.0a2.css" rel="stylesheet" type="text/css" />
    <link href="css/event.css" rel="stylesheet" type="text/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>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>
                Information</h1>
        </div>
        <div data-role="content">
            <div id="banner">
                <h2>
                    Mobile Dev 2011</h2>
            </div>
            <h3>
                The Event Venue</h3>
            <p>
                Information about the venue.</p>
            <h3>
                Hotels</h3>
            <p>
                This is the place for hotels information.</p>
            <h3>
                Transportation</h3>
            <p>
                All about transpoprtation.</p>
        </div>
    </div>
</body>
</html>

 

  

The page renders like so:

There is More to JQuery Mobile

If you are new to JQuery Mobile, as you walk through the example’s source code you will notice how fast you can get results using this framework.

In order to make it easy for you to get started, I have deliberately simplified the example, using only a few static HTML pages, and working with the page framework, toolbars and list view elements in JQuery Mobile.

However, there is much more to JQuery Mobile than what I have touched in this series. In upcoming articles I will introduce you to important user interface components such as dialogs, form elements and toolbars, as well as APIs that allow you to work with different touch events and screen orientations.

Downloads

Grab the code from the JQuery Mobile Tutorial repo: MiamiCoder JQuery-Mobile-Tutorial

More information

Check out the JQuery Mobile documentation, available at JQuery Mobile’s site.

Topics:

Published at DZone with permission of Jorge Ramon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}