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 ...
Get Smashing Mobile Web Development now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
