jQTouch 入门：创建您的第一个 jQTouch 应用程序
如何创建您的第一个 jQTouch 应用程序。
引言
在本文中，我们将使用 jQTouch 为智能手机开发我们的第一个 Web 应用程序。
在 jQTouch 中开发应用程序的方法非常简单。步骤如下：
- 对于我们 Web 应用的每个屏幕，创建一个单独的
div元素并为其分配一个唯一的 ID。div元素是一个常用的 HTML 元素，广泛用于布局网页。div还有助于定义 HTML 文档的一个分区或部分。 - 在主屏幕
div元素中创建一个无序列表。然后，在每个列表项中，放置一个锚点标签，其href属性链接到应用程序的其他div（屏幕）。
jQTouch 将隐藏除主屏幕以外的所有 div，并以吸引人的渐变效果渲染我们的主屏幕列表项。点击列表项会导致主屏幕滑动消失，并链接的 div 元素滑动出现。因此，通过使用 jQTouch，我们可以轻松地创建和格式化我们 Web 应用的各种屏幕，并在它们之间应用动画过渡。
注意：jQTouch 会将 <body> 部分的任何直接子元素转换为全屏面板，该面板可以向任何方向进行动画处理。
我们将为我们的书店创建三个屏幕：一个 主页，一个 图书 页面，以及一个 联系我们 页面。这三个页面分别由三个 div 元素表示，并分别分配了唯一的 ID：home、books 和 contactus。作为 body 部分的直接子元素的每个 div 元素都将成为应用程序中的一个面板。books 和 contactus 这两个面板另外包含段落元素，用于在其各自页面上显示信息。
我们的三个屏幕如图 1(a)、1(b) 和 1(c) 所示。从现在开始，我们将称这三个主要的 div 元素为 panels。每个面板还将包含一个工具栏，用于显示面板标题和导航按钮。应用程序的完整代码显示在列表 1 中。
注意：要尝试本书中的示例，请在 /Library/WebServer/Documents 文件夹中创建它们。如果以下应用程序被创建并保存为例如 a1.html，那么要测试它，请打开浏览器并将其指向地址 https:///a1.html。
列表 1. 初始应用程序代码
<html>
<head>
<title>Books Store</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/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>Book Store</h1>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#books">Books</a></li>
<li class="arrow"><a href="#contactus">Contact Us</a></li>
</ul>
</div>
<div id="books">
<div class="toolbar">
<h1>Books</h1>
<a class="button back" href="#">Back</a>
</div>
<p>We are a US-based organization providing a wide variety of books at a
reasonable price</p>
</div>
<div id="contactus">
<div class="toolbar">
<h1>Contact Us</h1>
<a class="button back" href="#">Back</a>
</div>
<p>XYZ Book Company</p>
<p>11 Books Street, NY, NY 10012 </p>
<p>USA</p>
</div>
</body>
</html>
我们在列表 1 中做的第一件事是通过添加 jQTouch 样式表和主题的引用来链接 CSS 和 JavaScript 文件。jqtouch.css 文件中的样式规则用于处理动画、方向等。此外，我们还添加了对相应 JavaScript 文件的引用——jquery.1.3.2.min.js 和 jqtouch.js。请记住，jQTouch 需要并附带其自身的 jQuery 副本（尽管我们可以选择链接另一个副本）。为了使应用程序正常工作，必须在引用 jQTouch 之前添加对 jQuery 的引用。
就主题而言，jQTouch 需要一个基本主题来使页面过渡生效并提供 iPhone 原生的屏幕。jQTouch 提供了两个主题：
- apple，模仿默认的 iPhone 外观
- jqt，基于 apple，但更暗且更通用
我们也可以通过从头开始构建或修改现有的 jQTouch 主题来创建自己的自定义主题。
在链接 CSS 和 JavaScript 文件之后，我们需要初始化 jQTouch 对象，如下所示：
<script>
var jQT = new $.jQTouch();
</script>
此函数初始化一个 jQTouch 对象并将其分配给变量 jQT。然后，变量 jQT 用于通过其函数使用 JavaScript 来操作 jQTouch。我们也可以在初始化 jQTouch 对象时指定某些可选的属性值，从而使我们能够自定义 Web 应用程序的行为。我们将在本章稍后部分讨论这些属性。
正如我们之前所说，Web 应用程序的所有屏幕都由单独的 div 元素表示。所有面板都有工具栏，它们是类名为 toolbar 的 div。工具栏显示在每个面板的顶部，并以传统的 iPhone 格式出现。工具栏始终包含一个 h1 元素，该元素表示面板的 title，以及两个可选按钮，其中一个可以是 back 按钮。back 按钮出现在工具栏的左侧，用于导航到上一页。
我们在 Books 和 Contact Us 页面的工具栏中添加了具有 button 和 back 类名的按钮。back 按钮上的 href 设置为 #，这将导航到上一个面板。当然，通过将 href 设置为指向特定 ID，我们可以导航到具有该 ID 的面板。例如，如果 back 按钮的 href 设置为 #home，我们将始终转到 home。主面板中的两个列表项 (li) 具有指向 books 和 contactus 的超链接，这意味着当选择这些列表项时，我们将跳转到相应 ID 的面板。
我们希望 home 页面显示指向 Book 和 Contact Us 页面的导航链接。要显示此类导航链接，我们使用无序列表。我们可以为 <ul> 元素添加简单的类来更改其样式，例如 edgetoedge 或 rounded：
edgetoedge类使无序列表以 iPhone 的全屏导航列表设计显示。edgetoedge类<ul>元素中的每个项目都从视图区域的左侧延伸到右侧，以便于触摸输入，如图 2(a) 所示。rounded类通常用于目标页面以显示信息列表。rounded类<ul>元素中的项目被包含在一个圆角矩形框中。
无序列表中的每个项目都包含一个导航到指定应用程序面板的超链接。我们可以选择性地将 arrow 类应用于列表项，这将显示项目右侧的箭头。该图标告诉用户有一个额外的网页（屏幕）可供查看。
每当我们导航到一个新页面时，都会发生两个动画：新页面**淡入**，旧页面**淡出**。当我们选择一个 back 按钮时，会发生**反向动画**。当选择一个列表项时，默认动画会使新页面看起来是从屏幕右侧滑入的。我们可以通过应用八种不同的动画效果中的任何一种来跳转到另一个网页：slide、slideup、dissolve、fade、flip、pop、swap 和 cube。
注意：工具栏按钮可以是任何类——back、button 或 cancel——但可以具有任何动画样式。
每个访问过的屏幕都会被插入到 page history 中，我们可以使用 back 按钮导航回历史记录中的任何先前页面。
当列表 1 中的代码执行时，第一个面板 home 会出现，如图 1(a) 所示。面板标题为 Book Store，后面跟着两个列表项：Books 和 Contact Us。当点击 Books 列表项时，我们会跳转到 books 面板，如图 1(b) 所示。目标面板的标题是 Books，工具栏上有一个 Back 按钮。books 面板的信息显示在工具栏下方。如果我们选择 Back 按钮，我们将返回到 home 面板。
同样，当选择 Contact Us 时，我们会跳转到 contactus 面板，如图 1(c) 所示。
注意：由于我们尚未在锚点标签中指定动画类型，因此应用了默认动画 slide。
应用 Apple 主题
我们第一轮编码使用了 jqt 主题，该主题相当暗。让我们看看当主题更改为 apple 时我们的页面外观。这很简单——我们只需在添加 jQTouch 主题引用的行中将 jqt 替换为 apple。因此：
<link
type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
将被替换为
<link type="text/css" rel="stylesheet"
media="screen" href="themes/apple/theme.css">
现在我们的应用程序将以 apple 主题显示，如图 2(a)、2(b) 和 2(c) 所示。
