Creating a Website Using JQuery Mobile, Part 2

This article is a continuation of my series on how to build a website with JQuery Mobile. In the first part of this tutorial, Creating a Website Using JQuery Mobile, Part 1, I presented the requirements for the site and finished implementing the Home page.

Now it is time to build the Speakers page.

From Wireframe to HTML

Let’s take a look at the wireframe for this page:

As with the home page, I will use the JQuery Mobile’s standard boilerplate page template for the Speakers page. I will start with a plain page like so:

<!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>My Event</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>
                Speakers</h1>
        </div>
        <div data-role="content">
            <div id="banner">

            </div>
            <p>
                Page content goes here.</p>

        </div>
    </div>
</body>
</html>

This is how it looks:

Before adding more elements to this page, I will test that the incoming link from the Home page is working correctly:

JQuery Mobile Page Transitions

When you try the code, you will notice a nice slide transition from the Home to the Speakers page. The jQuery Mobile framework includes a set of six CSS-based transition effects:

  • Slide
  • Slideup
  • Slidedown
  • Pop
  • Fade
  • Flip

According the the JQuery Mobile’s page transitions documentation , these effects can be applied to any object or page change event. The effects apply the chosen transition when navigating to a new page, and the reverse transition for the Back button. (The right to left slide transition is the default transition.)

You will also notice the “back” button. The framework automatically generates a “back” button on every page. If needed, you can prevent the back button from being added to a header by either adding your own button to the left slot, or adding the data-nobackbtn=”true” attribute to the header container.

Adding Page Elements

Let’s now proceed to add elements to the Speakers page.

I first need some leading text in the content area of the page:

<div id="banner">
  <h2>Mobile Dev 2011</h2>
</div>
<p>We've got the world's greatest experts ready to deliver a full day of amazing content!</p>

Finally, I need an unordered list to display the speakers. Each speaker will have its own template within an li element:

<ul data-role="listview" data-inset="true">
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker A</h3>
            <p>
                Short introduction of Speaker A</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker B</h3>
            <p>
                Short introduction of Speaker B</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker C</h3>
            <p>
                Short introduction of Speaker C</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker D</h3>
            <p>
                Short introduction of Speaker D</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker E</h3>
            <p>
                Short introduction of Speaker E</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker F</h3>
            <p>
                Short introduction of Speaker F</p>
        </div>
    </li>
</ul>

As in the Home page, assigning the data-role=“listview” attribute to the ul element will cause jQuery Mobile to apply styles to the list that will transform it into a mobile-friendly list view. That’s all it takes to complete the Speakers page:

Next Steps

The site is starting to take shape now that the Home and Speakers pages are finished. In the next part of this series I will build the Schedule page.

Thoughts? Comments?

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

  1. Levi says

    Did you forget to include the custom CSS? Im assuming I need to float the images in my list-veiw? As it stands now, my speaker photos are not properly aligned.

  2. says

    Hi, I have a little question.

    When you have multiple pages, you have to set each time the header/footer and yet there are the same !

    Have you find a solution to centralize and reuse (include) this file into another one (like template) ?

  3. Tom says

    I’m following your tutorial, and things are working as expected except one nagging issue: no back button. The changes from your original code are:
    - using jquery and jquery mobile from code.jquery (version 1.6.4 and 1.0.1)
    - different text in menus

    I can add data-icon=”arrow-l” with data-transition=”slide” and data-back=”true” to give myself a back button, but I thought the framework would do it automatically for me. Nothing else in the header before I added my own back button.

    Does this seem familiar?

  4. Paul says

    Hi Jorge,
    I just realised the power of web apps recently and started searching for tutorials on it. The only one I was able to get had so much css codes that tweaking it to my taste was quite difficult.
    But with this, I know I can develop from the scratch now. Your tutorial is direct and devoid of unnecessary codes.
    Thanks for sharing.
    Wish you well in your future endeavours.

  5. Thomas Kleven says

    Quick question, I have two home pages now one for my mobile site and one for my regular, how do I tell browsers which ones to serve up automatically. I tried media queries and they work fine but for aome reason the i phone seems to use a much larger format than other phones which creates a huge problem. Would you suggest maybe adding a max and min width value to a wrapper tag then use percentages for the inner markup? I havent tried this as of yet and thought that jquery would take care of these things for me but little did I know eh?

    I also see m.mobilesitename.com does the .m have a special meaning ?

  6. sanjeev says

    Hi Sir

    I am sanjeev. i am new on jquery mobile so please give me tutorial for jquerymobile and execution process of jquerymobile.

    Send me Tutorial my email Add:-sanjeevn79@gmail.com

    Thanks

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *