通过工具栏按钮进行前进导航
如何在智能手机中使用工具栏按钮进行前进导航。
引言
在本例中，我们将学习如何使用工具栏按钮进行前进导航。为了理解如何实现，让我们创建一个包含六个面板的小应用程序：主页、类别、子类别、选择书籍、购物车中的商品和结账。让我们假设分配给这六个面板的 ID 分别是 home、bookscategories、subcategories、booksdisplay、showcart 和 checkout。每个面板的用途如下
- 主页—应用程序执行时出现的第一个面板（ID 为
home）（参见图 1.1 (a)）。 - 类别—当从主页面板中选择“书籍”列表项时，此面板（ID 为
bookscategories）显示书籍类别（参见图 1.1(b)） - 子类别—当从类别面板中选择一个书籍类别时，此面板（ID 为
subcategories）显示书籍子类别（参见图 1.1(c)）。 - 选择书籍—此面板（ID 为
booksdisplay）显示属于所选类别和子类别的书籍。当从子类别面板中选择一个子类别时，该面板出现。用户可以从该面板中选择书籍添加到购物车（参见图 1.2 (a)）。 - 购物车中的商品—此面板（ID 为
showcart）显示购物车中的书籍。目前，只有选定的虚拟书籍才会出现在购物车中。此面板有一个结账按钮，它跳转到结账面板（参见图 1.2 (b)）。 - 结账—这是结账流程的最后一个面板，只有一个返回按钮用于返回到上一个屏幕（参见图 1.2 (c)）。
注意：出现在类别、子类别和选择书籍面板中的列表项是硬编码的，目前只是虚拟数据。
注意：目前，购物车内容是硬编码的。
我们可以通过向工具栏添加类名为 back 的超链接来创建所有屏幕面板中的返回按钮。这些 HREF 超链接都指向 #，这只是跳转到页面历史记录中的第一个上一页。
我们面临的唯一问题是让“显示购物车”和“结账”按钮起作用。但在处理实际功能之前，我们首先要学习如何在工具栏的右侧放置按钮。
“返回”和“取消”按钮出现在工具栏的左侧。只有具有 button 类名的按钮才出现在右侧。要使按钮跳转到具有特定 ID 的面板，我们需要将按钮的 href 设置为指向它。你可能会认为，此时，用于导航到 showcart ID 的右侧按钮的代码将如下所示
<a class="button " href="#showcart">Show Cart</a>
尽管代码看起来是正确的，但它实际上并不能做到我们想要的，因为超链接中未指定任何动画。默认的 slide 动画不适用于此代码片段。但是，指定任何其他可用的动画效果很简单：slideup、dissolve、fade、flip、pop、swap 和 cube。
使用 slideup 动画的 showcart ID 的功能代码是
<a class="button slideup" href="#showcart">Show Cart</a>
同样，以下代码片段在工具栏右侧创建了一个结账按钮，该按钮跳转到具有 flip 动画的 checkout 面板
<a class="button flip" href="#checkout">Checkout</a>
完整的代码显示在列表 1.1 中。
<html>
<head>
<title>Book Store</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen"
href="themes/apple/theme.css">
<script type="text/javascript" src="jqtouch/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = new $.jQTouch();
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Home</h1>
<a class="button slideup" href="#showcart">Show Cart</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#bookscategories">Books</a></li>
</ul>
</div>
<div id="bookscategories">
<div class="toolbar">
<a class="back" href="#">Home</a>
<h1>Categories</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#subcategories">Literature & Fiction</a></li>
<li class="arrow"><a href="#subcategories">Home & Garden</a></li>
<li class="arrow"><a href="#subcategories">Computers & Internet</a></li>
<li class="arrow"><a href="#subcategories">Cooking, Food & Wine</a></li>
</ul>
</div>
<div id="subcategories">
<div class="toolbar">
<a class="back" href="#">Back</a>
<h1>Subcategories</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#booksdisplay">Subcategory1</a></li>
<li class="arrow"><a href="#booksdisplay">Subcategory2</a></li>
<li class="arrow"><a href="#booksdisplay">Subcategory3</a></li>
</ul>
</div>
<div id="booksdisplay">
<div class="toolbar">
<a class="back" href="#" >Back</a>
<h1>Select Books</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#showcart">Book 1</a></li>
<li class="arrow"><a href="#showcart">Book 2</a></li>
<li class="arrow"><a href="#showcart">Book 3</a></li>
<li class="arrow"><a href="#showcart">Book 3</a></li>
</ul>
</div>
<div id="showcart">
<div class="toolbar">
<a class="back" href="#" >Back</a>
<a class="button flip" href="#checkout">Checkout</a>
<h1>Items in Cart</h1>
</div>
<p> Book1 by author xyz </p>
<p> Book2 by author pqr </p>
</div>
<div id="checkout">
<div class="toolbar">
<a class="back" href="#">Back</a>
<h1>Checking Out</h1>
</div>
<p> You have not Signed Up yet </p>
</div>
</body>
</html>
注意：类为 back 或 cancel 的按钮只能出现在工具栏的左侧。只有类为 button 的按钮可以出现在右侧。
欲了解更多信息，请参阅我的书：“Beginning Web Development for SmartPhones: Developing Web Applications with PHP, MySQL and jQTouch”，可在 亚马逊 上获取。