要获得三个导航级别，请使用边对边 (edge-to-edge) 列表。这是在本机 iPhone 应用程序中常用的构造，用于浏览联系人、电子邮件和音乐。边对边列表将在 44 像素的等高行中显示项，并且有助于在大量信息中滚动查找。Apple 的 iPhone 人机接口指南 提供了构造边对边列表的规格，包括字体、字体大小和边框间距。iUi 框架用 CSS 和 JavaScript 语言实现这些规格，允许您创建像本机 iPhone 组件那样显示的简单 HTML 列表。
清单 1 显示了页眉，以及 java.applet 和 java.rmi 包的前两个导航级别。
清单 1. 带有页眉和前两个导航级别的 HTML 文档
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iDoc</title>
<meta name="viewport" content="width=320; initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>
<style type="text/css" media="screen">@import
"iui/iui.css";</style>
<style type="text/css" media="screen">@import
"iDoc.css";</style>
<script type="application/x-javascript"
SRC="iui/iui.js"></script>
</head>
<body >
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button"
href="#"></a>
</div>
<ul id="home" title="PACkages" selected="true">
<li><a href="#java.applet">java.applet</a></li>
<!-- more packages...-->
<li><a href="#java.rmi">java.rmi</a></li>
</ul>
<ul id="java.applet" title="java.applet">
<li class="group">Interfaces</li>
<li><a href="java.applet.AppletContext.html">
AppletContext</a></li>
<li><a href="java.applet.AppletStub.html">
AppletStub</a></li>
<li><a href="java.applet.AudioClip.html">
AudioClip</a></li>
<li class="group">Classes</li>
<li><a href="java.applet.Applet.html">Applet
</a></li>
<li><a href="java.applet.Applet.ACCessibleApplet.html">
AccessibleApplet</a></li>
</ul>
<ul id="java.rmi" title="java.rmi">
<li class="group">Interfaces</li>
<li><a href="java.rmi.Remote.html">
Remote</a></li>
<li class="group">Classes</li>
<li><a href="java.rmi.MarshalLEDObject.html">
MarshalledObject</a></li>
<li><a href="java.rmi.Naming.html">
Naming</a></li>
<li><a href="java.rmi.RMISecurityManager.html">
RMISecurityManager</a></li>
<li class="group">Exceptions</li>
<li><a href="java.rmi.AccessException.html">
AccessException</a></li>
<li><a href="java.rmi.AlreadyBoundException.html">
AlreadyBoundException</a></li>
<li><a href="java.rmi.ConnectException.html">
ConnectException</a></li>
<li><a href="java.rmi.ConnectIOException.html">
ConnectIOException</a></li>
<li><a href="java.rmi.MarshalException.html">
MarshalException</a></li>
<li><a href="java.rmi.NoSuchObjectException.html">
NoSuchObjectException</a></li>
<li><a href="java.rmi.NotBoundException.html">
NotBoundException</a></li>
<li><a href="java.rmi.RemoteException.html">
RemoteException</a></li>
<li><a href="java.rmi.RMISecurityException.html">
RMISecurityException</a></li>
<li><a href="java.rmi.ServerError.html">
ServerError</a></li>
<li><a href="java.rmi.ServerException.html">
ServerException</a></li>
<li><a href="java.rmi.ServerRuntimeException.html">
ServerRuntimeException</a></li>
<li><a href="java.rmi.StubNotFoundException.html">
StubNotFoundException</a></li>
<li><a href="java.rmi.UnexpectedException.html">
UnexpectedException</a></li>
<li><a href="java.rmi.UnknownHostException.html">
UnknownHostException</a></li>
<li><a href="java.rmi.UnmarshalException.html">
UnmarshalException</a></li>
</ul>
图 8 显示了使用边对边列表生成的顶层选择包导航级别。
图 8. 像导航本机 iPhone 应用程序一样导航 Javadoc 包
图 9 显示了在 iPhone Preview 模式下显示的最终的 java.rmi 包。
图 9. 在 java.rmi 包中导航接口、类和异常
对于 iDoc 的目标详细信息页面，使用另一种 iPhone 构造：圆角矩形列表。这些列表对于分组信息十分有用，并且 iPhone 中的设置面板都使用这种列表。使用圆角矩形列表可以分隔方法签名与参数及异常清单。在 V0.13 中，iUi 只支持将圆角矩形列表用于表单输入；将其元素用于静态文本将生成格式错误的块。 使用定制的 iDoc.css 文件扩展这些 CSS（如清单 2 所示），以添加用于显示带有静态文本的圆角矩形列表的 textRow 元素。
清单 2. 定制 textRow CSS 扩展以正确显示静态文本
/* Adding a new row CSS style to iUi for displaying bLOCks of text */
.textRow {
position: relative;
border-bottom: 1px solid #999999;
-webkit-border-radius: 0;
text-align: right;
}
.textRow > p {
text-align: left;
margin: 5px 8px 5px 10px;
padding: 0px 0px 0px 0px;
}
fiELDset > .textRow:last-child {
border-bottom: none !important;
}
清单 3 显示了 java.math.BigDecimal 的一种构造方法的详细信息页面。
清单 3. 使用 textRow 元素的 HTML 详细信息页面
<div id="java.math.BigDecimal(long,java.math.MathContext)" title="BigDecimal"
class="panel">
<fieldset>
<div class="textRow"><p><b>
public BigDecimal(long, MathContext)</b></p></div>
<div class="textRow"><p>Translates a
<code>long</code> into a
<code>BigDecimal</code>, with rounding according to the context settings.
The scale of the <code>BigDecimal</code>, before any rounding, is zero.
</p></div>
</fieldset>
<h2>Parameters</h2>
<fieldset>
<div class="textRow"><p><b>long val
</b>: <code>long</code> value to be converted
to <code>BigDecimal</code>.</p></div>
<div class="textRow"><p><b>MathContext mc
</b>: the context to use.</p></div>
</fieldset>
<h2>Throws</h2>
<fieldset>
<div class="textRow"><p><b>ArithmeticException
</b>: if the result is inexact but
the rounding mode is <code>UNNECESSARY</code>.</p></div>
</fieldset>
</div>
