Along with standard iPhone Web app meta tags, every iWebKit-enabled page must include references to its CSS style sheet and JavaScript file in the document head:

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,
user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"
language="JavaScript" ></script>

You'll incorporate several elements of the UI regardless of the application type or style. These are shown here.

The Top Bar

The top application bar of an iPhone Web app is typically used to display the title of your app/page and provide one or more "rabbit trail" buttons for navigating the app. To define the top bar, use the following div definition:

<div id="topbar"></div>

Inside of the top bar, you add a title:

<div id="topbar">
    <div id="title">iWebKit</div>
</div>

Then you add a navigation button:

<div id="topbar">
    <div id="title">iWebKit</div>
    <div id="leftbutton">
      <a href="http://iwebkit.net">PC website</a>
    </div>
</div>

The id="leftbutton" specifies a single left button to include on the top bar. You can also use id="rightbutton" to add a single button to the right side of the top bar.

Alternatively, you can add multiple navigation buttons to the top of a page by using either <div id="leftnav"></div> or <div id="rightnav"></div>. Multiple buttons enable you to achieve "rabbit trail" functionality, providing hierarchical links above or below the current page in the app. For example, notice the navigation for the page shown in Figure 3-2.

Figure 3-2. Navigation buttons on the top bar

The following HTML was used to define the top bar shown in Figure 3-2:

<div id="topbar">
    <div id="leftnav">
        <a href="index.html"><img alt="home" src="images/home.png" /></a>
        <a href="list.html">Lists</a></div>
    <div id="rightnav">
        <a href="storelist.html">Store list</a>
    </div>
</div>

If you do plan to use multiple navigation buttons, you should avoid using a title tag, or you run a high risk of running out of real estate on the top bar.

<div id="content"></div>

<ul class="pageitem"></ul>

The Text Box

You can add labels or descriptive text using the following tag:

<li class="textbox"></li>

You can add a single line of text or multiple paragraphs inside the text box. For example:

<li class="textbox">
    <p>Description:</p>
    <p>This app does this and that...</p>
</li>

You can also add standard HTML content inside a text box. Figure 3-3 shows a text box containing a bulleted list. Here's the code for that:

<ul class="pageitem">
    <li class="textbox">
    <ul>
        <li>Popup now fully fullscreen compatible.</li>
        <li>Now the blue store list background loads only when it is needed,
        not always.</li>
        <li>Footer font styles now apply to the footer div not only the link
        in it.</li>
        <li>Automatic &quot;load 10 more&quot; in list and musiclist views.</li>
        <li>New wordpress icon.</li>
        <li>Various bug fixes and enhancements.</li>
    </ul>
    </li>
</ul>

Figure 3-3. Bulleted list inside a text box

<span class="header"></span>

<li class="textbox">
    <span class="header">Welcome</span>
    <p>Welcome to the iWebKit 4 Demo site!</p>
</li>

Menu Items

Menu items are at the heart of the navigation scheme of most iPhone apps. To define a text-only menu item inside a content box, use the following:

<li class="menu">
    <a href="goto.html">Menu item 1</a>
</li>

To add a bolded look to the menu item:

<li class="menu">
    <a href="goto.html">
        <span class="name">Menu item 1</span>
    </a>
</li>

To add an icon to the menu item, add an img tag inside the link:

<li class="menu">
    <a href="goto.html">
        <img alt="Description" src="thumbs/menuitem1.png" />
        <span class="name">Menu item 1</span>
    </a>
</li>

If you add an icon image, be sure it is a maximum of 32 pixels in height.

To add an arrow to the right-side:

<li class="menu">
    <a href="goto.html">
        <img alt="Description" src="thumbs/menuitem1.png" />
        <span class="name">Menu item 1</span>
        <span class="arrow"></span>
    </a>
</li>

The code that follows creates the What's New menu item shown in Figure 3-1:

<li class="menu">
    <a href="changelog.html">
        <img alt="changelog" src="thumbs/start.png" />
        <span class="name">What&#39;s New?</span>
        <span class="arrow"></span>
    </a>
</li>

You can also add special blue highlight text to insert a brief comment between the menu item and the right side arrow. The comment can call attention to the item ("Exclusive!") or can describe what users can expect to see if they select that option ("With Images"). Figure 3-4 shows a menu list in which three items add comments.

Figure 3-4. Comments can be added to menu items.

To add a comment, use a <span class="comment"></span> tag:

<li class="menu">
    <a href="list.html">
        <img alt="list" src="thumbs/contacts.png" />
        <span class="name">Classic Lists</span>
        <span class="comment">With Images</span>
        <span class="arrow"></span>
    </a>
</li>

<span class="graytitle">Features</span>

The Footer

You can add a footer to the bottom of a page with the following declaration:

<div id="footer">
    <a href="http://iwebkit.net">Powered by iWebKit</a>
</div>

The footer div should be placed as a direct child of the body tag to get the gray-text-on-background look shown in Figure 3-5.

Figure 3-5. Footer added to the bottom of a page

Using the elements described in this section, you can create a basic iPhone side-to-side menu navigation page, such as the one shown in Figure 3-1.

Besides the normal pages you can construct using the common UI elements described earlier, iWebKit features two special page types. However, when using them, you must follow their guidelines for the elements allowed in them.

A Simple List Page with Groupings

iWebKit allows you to create a simple list with optional groupings, such as the page shown in Figure 3-6. The advantage of the simple list is that the paging logic is built into the page type, allowing you to define the content and let iWebKit determine its pagination simply by adding an autolist element.

Figure 3-6. Simple list page type

To convert a normal page to a simple list page, add a class="list" attribute to the body tag:

<body class="list">
</body>

You should insert top bar, content, and footer divs into the body, just like any other iWebKit page. However, inside the content div, you'll want to define a special type of ul list:

<div id="content">
    <ul class="autolist">
    </ul>
</div>

All the content inside the ul should (naturally) be li items. The item itself can contain text and images and can contain links or static text.

The autolist class enables you to take advantage of iWebKit's automatic pagination, which I explain later in this section.

The Simple Text List Item

A normal list item text link looks essentially identical to the menu item described in the previous section:

<li>
    <a href="index.html">
        <span class="name">Go Home</span>
        <span class="arrow"></span>
    </a>
</li>

Because the li is contained inside the ul autolist, you don't need to identify a class for the li. A link, bolded item text, and right arrow are defined inside the item.

The Image List Item

Here's an example of a more complex list item that uses familiar elements (such as an image and comments). However, the simple list page formats them differently. Here's the code used for the Buy Album on iTunes item in Figure 3-6:

<li class="withimage">
    <a class="noeffect" href="http://itunes.apple.com/WebObjects/
    MZStore.woa/wa/viewAlbum?id=130244757">
        <img alt="test" src="pics/californication.jpg" />
        <span class="name">Buy Album on iTunes</span>
        <span class="comment">Californication</span>
        <span class="arrow"></span>
    </a>
</li>

The list item expands to fit the size of the image. Also note that the comments are listed below the item text and displayed in a smaller, grayed font.

The Nonlinked List Item

You may want to present information in a list structure that doesn't need hyperlinks. If so, just get rid of the <span class="arrow"></span> tag and then change the a link to simply be <a class="noeffect"></a>. For example:

<li>
    <a class="noeffect">
        <img alt="test" src="pics/milk.jpg" />
        <span class="name">Buy Milk</span>
        <span class="comment">Check the date</span>
    </a>
</li>

Pagination

iPhone UI conventions hold that if you are displaying a list of 10 or so items, it is fine to display them in a single one-page list. However, if you have 30 to 50 or more possible items, you'll want to break up the list into manageable chunks on the page. The logic to carry this out is not rocket science, but it sure is nice to have a framework do it for you. iWebKit does not disappoint; you can add pagination to your simple list by adding class="autolist" to the ul container and then the following line at the end of the list:

<li class="hidden autolisttext">
     <a class="noeffect" href="#">Load 10 more items...</a>
</li>

When you add this, iWebKit automatically splits up the list into multiple pages and adds the notification message you specify at the bottom (see Figure 3-7). When a user clicks the Load 10 more items link, iWebKit replaces the existing list contents with the next 10.

Figure 3-7. Splitting up a list of items

The Group Title

When you are dealing with a longer list of items, you may want to split up the list into multiple groups. To add a title to these subgroupings, use the following item:

<li class="title"> </li>

Figure 3-6 shows three group titles defined: navigation, Music to buy, and To get at the supermarket.

The Music List Page Type

A second special type offered by iWebKit is the Music list type, as shown in Figure 3-8. This page is structured as a two-column list, much like you could use to display a list of songs on an album. However, you can also use it for a variety of other purposes.

You define a music list page by adding the following class to the body tag:

<body class="musiclist"></body>

Figure 3-8. Music list page type

Much like the simple list, you can add a top bar, content region, and footer inside the body. Inside the content div, you define the following ul tag as a direct child of it:

<div id="content">
    <ul class="autolist">
    </ul>
</div>

The class="autolist" attribute specifies automated pagination.

Each item in a music list can have four fields of information: number, name, time, and link arrow. These are defined using spans, as shown here:

<li>
    <a class="noeffect" href="">
        <span class="number">1</span>
        <span class="name">Around The World</span>
        <span class="time">(3:58)</span>

<span class="arrow"></span>
    </a>
</li>

iWebKit provides support for styling form elements to emulate the look of iPhone form controls. To specify a form element, enclose the following within a special li tag:

<ul class="pageitem">
    <li class="form"></li>
</ul>

Inside the <li class="form"></li> tag, you can then specify different form elements.

To define a large text field, use an <input type="text"> tag:

<li class="form"><input placeholder="Name" type="text" /></li>

The placeholder attribute value is added as grayed text in the text box. When the user clicks in it, the placeholder text disappears.

To define a large password field, use an <input type="password"> tag.

<li class="form"><input placeholder="Password" type="password" /></li>

Like any password field, Safari substitutes dots for the characters that the user displays.

Figure 3-9 shows the large text and password fields.

Figure 3-9. Large text and password fields

To define a narrow text field with a label before it, use the <span class="narrow"> tag combined with the <span class="name"> tag.

<li class="form">
    <span class="narrow">
        <span class="name">First Name</span>
        <input type="text" />
    </span>
</li>

Figure 3-10 shows the results.

Figure 3-10. Narrow labeled field

You can create several other controls in a similar fashion. To define a text area, add a textarea inside of a <li class=textbox"> tag:

<li class="textbox">
    <textarea name="TextArea">Add your text here</textarea>
</li>

To define a check box:

<li class="form">
    <span class="check">
        <span class="name">Label</span>
        <input name="remember" type="checkbox" />
    </span>
</li>

Users can't slide these yes/no controls, but pressing them toggles between the two values.

You can define a set of radio buttons by enclosing a set of radio inputs inside a ul container and assigning the same name attribute value for the input tags. When you do so, a user can select a mutually exclusive option from the set. Here's how you can define a three-option radio button set. (Note that the common name for the input name values is music):

<ul class="pageitem">
    <li class="form">
        <span class="choice">
            <span class="name">option1</span>
            <input name="music" type="radio" value="other" />
        </span>
    </li>
    <li class="form">
        <span class="choice">
            <span class="name">option2</span>
            <input name="music" type="radio" value="Metal" />
        </span>
    </li>
    <li class="form">
        <span class="choice">
         <span class="name">option3</span>
         <input name="music" type="radio" value="Metal2" />
      </span>
    </li>
</ul>

Figure 3-11 shows the check box and radio option groups.

Figure 3-11. Defining check box and radio options

To create a select drop-down group, simply define an HTML select element and stuff it inside an li tag:

<li class="form">
    <select name="select">
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
</li>

As you can see by now, there is a clear pattern for several form elements: define an HTML form element and place it inside an <li class="form"> tag. Here are additional examples:

Submit button:

<li class="form">
    <input name="Submit" type="button" value="submit" />
</li>

Reset button:

<li class="form">
    <input name="Reset" type="button" value="reset" />
</li>

Button:

<li class="form">
    <button name="button1">OK</button>
</li>

One of the real innovative capabilities of iWebKit is that it enables you to create popup dialog boxes that emulate native iPhone dialogs (also known as action sheets) and are more sophisticated than the typical JavaScript alert box.

You define a popup dialog by using the <div class="popup"></div> tag. You should add this tag outside of the <div id="content"> as a direct child of the body, but place all popup definitions before the <div id="footer">. Here's a sample popup dialog:

<div id="popup1" class="popup">
    <div id="frame" class="confirm_screen">
    <span>popup example</span>
        <a href="index.html">
            <span class="gray">Home</span>
        </a>
        <a href="storelist.html">
            <span class="red">Previous feature</span>
        </a>
        <a class="noeffect" onclick="iWebkit.closepopup(event)">

<span class="black">Cancel</span>
        </a>
    </div>
</div>

The <span> defines dialog box text, whereas the remaining a link definitions define different button styles: gray, red, and black. Figure 3-12 shows the dialog displayed in Safari.

Figure 3-12. iWebKit's popup dialog

To call this dialog, you need to add an onclick handler to a link tag:

<a class="noeffect" onclick="iWebkit.popup('id')">

When the link is clicked, the popup() method of the iWebKit object is called. The id parameter specifies the id of the div that defines the popup.

Table 3-1 provides a summary of all the major UI elements that can be defined using iWebKit.

<div id="leftnav">
    <a></a>
    <a></a>
     ...
</div>

<div id="rightnav">
    <a></a>
    <a></a>
     ...
</div>

<li class="menu">
<a>Menu item</a>
</li>

<li class="menu">
<a>
<img />
Menu item
</a>
</li>

<li class="menu">
<a>
Menu item
<span class="arrow"></span>
</a>
</li>

<li class="menu">
<a>
Menu item
<span class="comment"></span>
</a>
</li>

<body class="list">
</body>

<li>
<a>
Menu item
<span class="arrow"></span>
</a>
</li>

<li class="withimage">
<a>
<img />
<span class="comment">Comment</span>
<span class="arrow"></span>
</a>
</li>

<li class="form">
<input placeholder="Name" type="text" />
</li>

<li class="form">
<input placeholder="Password" type="password" />
</li>

<li class="form">
<span class="narrow">
<span class="name">Label</span>
<input type="text" />
</span>
</li>

<li class="form">
<span class="check">
<span class="name">Label</span>
<input name="remember" type="checkbox" />
</span>
</li>

<ul class="pageitem">
<li class="form">
<span class="choice">
<span class="name">Label</span>
<input name="radiogroup1" type="radio" value="myvalue" />
</span>
</li>
...
</ul>

<li class="form">
<select name="select">
<option value="1">option1</option>
 ...
</select>
</li>

<li class="textbox">
 <textarea></textarea>
</li>

<li class="form">
<input name="Submit" type="button" value="submit" />
</li>

<li class="form">
<input name="Reset" type="button" value="submit" />
</li>

<li class="form">
<button name="button1">OK</button>
</li>

<div id=" " class="popup">
<div id="frame" class="confirm_screen">
</div>
</div>

One of the unique aspects of iUI is that screens or pages displayed in an iUI app are HTML fragments; for example, a menu page is a ul element, and a destination page is a div. You can house these HTML fragments inside a single HTML file, or you can separate them into separate files. However, if you separate them into separate files, be sure you don't reference normal HTML files (with an html, head, and body). Instead, the file should contain just the HTML element that represents the page.

To enable the iUI framework for a page in your Web app, you'll want to reference its CSS style sheet and JavaScript file in the document head:

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
<link href="iui/iui.css" rel="stylesheet" type="text/css" />
<script src="iui/iui.js" type="text/javascript" language="JavaScript"></script>

Once you have these declarations added, you are ready to begin defining the different parts of the interface.

The top bar of the page is called a toolbar in iUI lingo. You can add one by defining a div and assigning it the toolbar class:

<div class="toolbar">
</div>

Each "screen" of the Web app defined inside the HTML file utilizes the same toolbar.

A top bar title can be added to the div by defining an h1 tag with a pageTitle id:

<h1 id="pageTitle"></h1>

Don't place content in the page title, because iUI adds that automatically for you for each screen.

For a left-aligned Back button, add the following:

<a id="backButton" class="button" href="#"></a>

iUI keeps track of the pagination order, so leave the href defined as href="#".

You can add a right-side action button to the top bar by defining an a link with the class button:

<a class="button" href="#searchForm">Search</a>

This button, which appears on each screen, points to a #searchForm section that I'll define shortly.

Combined, the application-wide top bar looks like this:

<div class="toolbar">
    <h1 id="pageTitle"></h1>
    <a id="backButton" class="button" href="#"></a>
    <a class="button" href="#searchForm">Search</a>
</div>

Each screen (or page) is defined as a ul list, with each menu item as separate list items. Here is the code used for the main screen of the app shown in Figure 3-13:

<ul id="home" title="Music" selected="true">
    <li><a href="#artists">Artists</a></li>
    <li><a href="#settings">Settings</a></li>
    <li><a href="stats.php">Stats</a></li>
    <li><a href="http://code.google.com/p/iui/" target="_self">About</a></li>
    <li>Nothing</li>
</ul>

The title attribute of the ul is placed in the top bar title. Each list item defines a link that can point to another ul list, another HTML file, or an external URL.

To link to another ul section in the same file, add a # and its id. For example, the first list item links to the <ul id="artists"></ul> element (which is defined later). If you reference a ul in a separate HTML file, link to the file itself.

iUI automatically adds right-aligned arrows to each menu item.

A listing page (much like directory listing inside the native Contacts app) can be defined much like the previous screen:

<ul id="artists" title="Artists">
    <li class="group">B</li>
    <li><a href="#TheBeatles">The Beatles</a></li>
    <li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li>
    <li class="group">C</li>
    <li><a href="#CrowdedHouse">Crowded House</a></li>
    <li class="group">J</li>
    <li><a href="#JennyLewis">Jenny Lewis</a></li>
    <li><a href="#JohnMayer">John Mayer</a></li>
    <li class="group">Z</li>
    <li><a href="#Zero7">Zero 7</a></li>
</ul>

You can add group headings by assigning a list item with the group class. Four group headings are defined in the preceding list. Figure 3-14 shows the list displayed inside Safari on iPhone.

Figure 3-14. Grouped menu listing

Notice that iUI updates the text and link of the Back button to point to the page that linked to it.

iUI provides a basic level of form controls, such as the ones shown in Figure 3-15.

Figure 3-15. Form controls of iUI

Consider how this page is constructed using the iUI framework. The destination "panel" page is defined using the following definition:

<div id="settings" title="Settings" class="panel">
</div>

As with the menu page, the title attribute is used for the top bar title. The panel class gives the page its striped background.

Inside a destination page, you can define a heading using an ordinary h2 tag:

<h2>Playback</h2>

A rounded corner box is defined with a fieldset tag. For example, the next code defines a fieldset. Inside of it, it defines two divs that define toggle buttons:

<fieldset>
    <div class="row">
        <label>Repeat</label>
        <div class="toggle" onclick="">
            <span class="thumb"></span>
            <span class="toggleOn">ON</span>
            <span class="toggleOff">OFF</span>
        </div>
     </div>
     <div class="row">
        <label>Shuffle</label>
        <div class="toggle" onclick="" toggled="true">
            <span class="thumb"></span>
            <span class="toggleOn">ON</span>
            <span class="toggleOff">OFF</span>
        </div>
     </div>
</fieldset>

The <div class="row"> defines a row inside a fieldset that can contain different types of elements or controls. In this example, it contains a label and a toggle button.

As you can see from the code, the toggle button is not defined with a single element, but through a div container and a set of spans that are stitched together by iUI to create the control.

The second fieldset follows a similar pattern, except standard text input elements are defined:

<h2>User</h2>
<fieldset>
    <div class="row">
        <label>Name</label>
        <input type="text" name="userName" value="johnappleseed" />
    </div>
    <div class="row">
        <label>Password</label>
        <input type="password" name="password" value="delicious" />

</div>
    <div class="row">
        <label>Confirm</label>
        <input type="password" name="password" value="delicious" />
    </div>
</fieldset>

Table 3-2 summarizes the main iUI elements.

<div id="id" title="pageTitle" class="panel">
</div>

iUI is used in several examples throughout this book. Refer to these for more information on how to implement iUI in your apps.

To use the UiUIKit framework in your Web app, you just need to reference its CSS style sheet file in the document head:

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" href="stylesheets/iphone.css" />

Once you have this declaration added, you are ready to begin defining the different parts of the interface.

The top bar of an app is defined using a div with a header id:

<div id="header">
</div>

To add a page title, use an h1 tag:

<h1>UiUI Kit</h1>

A Back button is defined by adding a class and id attributes:

<a href="index.html" class="nav" id="backButton">Index</a>

Right-side action buttons are defined by specifying nav Action as the class name:

<a href="search.html" class="nav Action">Search</a>

You should define side-to-side menu navigation pages by adding an id of normal to the body tag:

<body id="normal"></body>

As with iUI, the actual menu is defined using a ul list along with child list items. For example, here's the HTML code used for the menu shown in Figure 3-16:

<ul>
    <li><a href="about.html">About</a></li>
    <li class="arrow"><a href="headers.html">Headers</a></li>
    <li class="arrow"><a href="normal-lists.html">Normal lists</a></li>
    <li><a href="rounded-lists.html">Rounded lists</a></li>
    <li><a href="plastic-lists.html">Plastic lists</a></li>
    <li class="arrow"><a href="info-lists.html">Information fields</a></li>
    <li><a href="images-list.html">Images grid</a></li>
    <li><a href="chat.html">Chat</a></li>
    <li><a href="forms.html">Forms</a></li>
    <li><a href="button-panels.html">Buttons Panel</a></li>

</ul>

As you can see, to add an arrow to the right of a menu item, you would add the arrow class to the li. Other than that, it looks like a standard HTML list.

To define highlight text on the right, add a <small> tag. For example:

<li><small>new!</small> <a href="normal-icon.html">Icon list</a></li>

You can also add extended ASCII characters inside the small tag to display symbols like stars and checkmarks.

UiUIKit does not stop there. It goes well beyond these standard side-by-side features and offers many more options.

To create a contact list, with group headings and name emphasis, you can combine heading tags and ul lists for each subsection of the menu. Here's a snippet of HTML that makes up the contact list page shown in Figure 3-17:

<h4>E</h4>

<ul>
<li><a href="index.html">Elea <em>Peliche</em></a></li>
<li><a href="index.html">Elizabeth <em>Nogales</em></a></li>
<li><small>Es mi hermano</small> <a href="index.html">Emiliano
<em>Martín Lafuente</em></a></li>
<li><a href="index.html">Enrique <em>Dans</em></a></li>
<li><a href="index.html">Ernesto <em>González Aro...</em></a></li>
</ul>

<h4>F</h4>

<ul>
<li><a href="index.html">Fernández <em>Cols Aleix</em></a></li>
<li><a href="index.html">Fernández <em>Dominguez Alex</em></a></li>
<li><a href="index.html">Flavia <em>Olmedo</em></a></li>
<li><a href="index.html">Francesco <em>Esplugas</em></a></li>
<li><a href="index.html">Francisco <em>Perez Garzón</em></a></li>
</ul>

The only difference in code is the addition of the h4 group headings and the em tags to change the formatting for last names.

Figure 3-17. Contact list using UiUIKit

To add icons to the menu items, just add an img tag with a class="ico" attribute. For example, here's an icon menu:

<h1>Normal list with icons</h1>
<ul>
<li><img src="images/list-icon-1.png" class="ico" /> Example one</li>
<li><a href="normal-contact.html"><img src="images/list-icon-2.png"
class="ico" /> Example two</a></li>
<li><small>new!</small> <a href="normal-contact.html">
<img src="images/list-icon-3.png" class="ico" /> Example with label</a></li>
<li class="arrow"><a href="normal-content.html">
<img src="images/list-icon-4.png" class="ico" /> Example with arrow</a></li>
<li><a href="normal-metal.html"><img src="images/list-icon-5.png" class="ico" />
Metal list</a></li>
</ul>

Figure 3-18 displays this menu inside of Safari on iPhone.

Figure 3-18. Icon menu items

I did not mention it at the same time, but refer to Figure 3-18 for a moment. Notice that the menu is contained within a box, rather than being spread out from side to side. The reason for this is that the body tag did not have a id="normal" attribute added to it. Therefore, when a page has a plain body tag, the page is considered a destination page and is given the gray striped background.

You can define various elements on a destination page.

To define a heading on a destination page, use h1 as a direct child of the body:

<h1>Standard with content</h1>

UiUIKit includes a page type that neither iWebKit or iUi does—something it calls a plastic page (see Figure 3-19). A plastic page loosely resembles the look of the iPhone App Store—changing both the page background and menu appearances. What's more, you can define image-based banners and mini banners.

Figure 3-19. UiUIKit's plastic page

To define a plastic page, you need to give the body tag a plastic id:

<body id="plastic"></body>

Large and mini banners can be defined, but you need to write some style definitions yourself. Here's the code for the banners shown in Figure 3-19:

<ul class="bigbanner">
<li class="one"><a href="index.html">Use this space as title tooltip</a></li>
</ul>

<ul class="minibanner">
<li class="one"><a href="index.html">Use this space as title tooltip</a></li>
<li class="two"><a href="index.html">Use this space as title tooltip</a></li>
</ul>

However, to reference the specific images, you need to add the following CSS code to the document head:

<style type="text/css" media="screen">
ul.minibanner li.one { background: url(images/banner-1.png) no-repeat; }
ul.minibanner li.two { background: url(images/banner-2.png) no-repeat; }
ul.bigbanner li.one { background: url(images/banner-3.png) no-repeat; }
</style>

Plastic lists are structured the same way as the previous side-to-side menu lists created earlier. Because it is on a plastic page, UiUIKit transforms its look for you automatically:

<ul>
<li class="arrow"><small>2,99?</small> <a href="normal-simple.html">
Simple list</a></li>
<li class="arrow"><small>Free</small> <a href="normal-contact.html">
Contact list</a></li>
<li class="arrow"><small>Open Source</small> <a href="normal-content.html">
Content List</a></li>
<li class="arrow"><small>35?</small> <a href="normal-metal.html">Metal list</a></li>
<li class="arrow"><a href="normal-metal.html">Metal list</a></li>
<li class="arrow"><a href="normal-content.html">Content List</a></li>
<li><a href="/flash/player_net9_20080425.swf?link=594&cate=2">Download</a></li>
</ul>

UiUIKit offers some additional styles for specific pages as well. See Figures 3-20, 3-21, and 3-22.

Figure 3-20. Chat balloon page

Figure 3-21. Image grid page

Figure 3-22. Contact page

Table 3-3 summarizes the most commonly used components of UiUIKit.

<ul>
<li></li>
...
</ul>

<li>
  <small>Comment</small>
  <a href="url"></a>
</li>

<li>
   <a href="url">
    <img src="" class="ico" />
    Label
   </a>
</li>