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”>


<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”


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

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


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

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

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

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

<div id=”social”><p>Loading Social Results...</p></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 ...

Get Smashing Mobile Web Development now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.