Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating a Website Using JQuery Mobile, Part 2

DZone's Guide to

Creating a Website Using JQuery Mobile, Part 2

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

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

Le’ts 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

More information

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


With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}