Creating a Website Using JQuery Mobile, Part 3

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:

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

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.

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;title&gt;Information&lt;/title&gt;
    &lt;link href=&quot;../jquery-mobile/jquery.mobile-1.0a2.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;link href=&quot;css/event.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;script src=&quot;../jquery-mobile/jquery-1.4.4.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../jquery-mobile/jquery.mobile-1.0a2.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div data-role=&quot;page&quot;&gt;
        &lt;div data-role=&quot;header&quot;&gt;
            &lt;h1&gt;
                Information&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div data-role=&quot;content&quot;&gt;
            &lt;div id=&quot;banner&quot;&gt;
                &lt;h2&gt;
                    Mobile Dev 2011&lt;/h2&gt;
            &lt;/div&gt;
            &lt;h3&gt;
                The Event Venue&lt;/h3&gt;
            &lt;p&gt;
                Information about the venue.&lt;/p&gt;
            &lt;h3&gt;
                Hotels&lt;/h3&gt;
            &lt;p&gt;
                This is the place for hotels information.&lt;/p&gt;
            &lt;h3&gt;
                Transportation&lt;/h3&gt;
            &lt;p&gt;
                All about transpoprtation.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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

Want To Learn More?

Check out my How to Build a jQuery Mobile Application EBook. It teaches you how jQuery Mobile works by guiding you, step by step, through the process of building an application. It even explains how to keep application data synchronized with a server.

Comments

David says

March 10, 2011 at 12:22 AM

Hi, I am following your tutorials on the JQuery mobile website, and I am wondering if there is a way to attached another CSS file to it, or if “in-line styling” is possible…in the case that it is not possible how can we change some of the styling in the css

- Jorge says
  
  March 27, 2011 at 1:51 PM
  
  You can attach yuor own file David.
  
cognostek says

July 6, 2011 at 2:23 AM

Hi, You have an amazing tutorial, its really helpful. Thanks again. My quick question would be I was unable to get the RSS content of any website to mobile jquery.I have tried it but couldn’t find the answer. Have you tried it or can check if it works for you?

Andre Venter says

August 1, 2011 at 6:34 PM

Thank you for a great tutorial.

I have a strange outcome on phones. The site is behaving like a regular web site – very small buttons and text.

You need to zoom in a lot before the text becomes readable.

On iPad and HTCFlyer it works just like you screen shots.

Why not for mobile phones?

I posted it here – lab.think-a-doo.net/MobileConference/index.html
using jquery.mobile-1.0b1.min.js and .css

Mike says

October 11, 2011 at 3:15 PM

What event would you use in the speakers page to trigger an event when that page is loaded/displayed? I’m trying to find out how to run some javascript when the user clicks a list item and is taken to a new page. The original page uses the pagecreate event but that doesn’t work for the second page. Thanks

Steve Allen says

March 18, 2012 at 1:38 PM

I have seen jquery mobile built sites that have a background image. How would I get that look. I have tried adding a background image in a custom css file to * and to the body, but the jquery info overrides it and the image only shows under – below – the jquery elements. Seems like it should be easy to do.