O'Reilly logo

Smashing Mobile Web Development by Greg Avola

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the Wine Detail Page

The Activity tab displays all the wines added to the database. The feed is nice, but what if you wanted to see more information? That’s where the Wine Detail page comes into play.

Creating the Wine Detail page structure

The first thing you need to do is create a new page in your structure. Add the following code to a new file called detail.html, which will hold the markup for the Wine Detail page. Copy the <head> section from index.html and insert the following code into the new file’s <body>:

<div id=”wineDetail” data-role=”page”>

<div data-role=”header” data-position=”inline”>

<h1>Wine Detail</h1>

<div data-role=”navbar” data-iconpos=”bottom”>

<ul>

<li><a data-icon=”star” href=”#activity”>Activity</a></li>

<li><a data-icon=”grid” href=”#manage”>Manage</a></li>

<li><a data-icon=”info” class=”ui-btn-active”

href=”#find”>Find</a></li>

<li><a data-icon=”gear” href=”#settings”>Settings</a></li>

<li><a data-icon=”search” href=”#search”>Search</a></li>

</ul>

</div><!-- /navbar -->

</div><!-- /header -->

<div id=”detail” data-role=”content”>

</div><!-- /content -->

<div id=”social”><p>Loading Social Results...</p></div>

</div>

This page, while similar to the Activity tab, has some differences:

In the content area, you give the div an ID of detail.

You add a new <div> with an ID of social, which you will use to display data pulled in from social media.

Building the Wine Detail page logic

Now that you have the markup in place, you build ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required