第10章　扩展界面

W eb页面给人的感觉就像是长长的一页的目录。如果看上去有太长的文本和图片要滚动，访问者会应接不暇，并且他们无法快速找到自己真正需要的信息。为访问者提供工具来找到他们想要的东西，这完全取决于我们。使用JavaScript和jQuery，我们可以把Web页面流线化，并且使得访问者更容易处理，可以隐藏内容直到需要的时候才显示，并且提供对信息更为容易的访问方式。

在本章中，我们将学习使得页面容易阅读和使用的基本技术。折叠面板和标签页面板把很多信息放入一小块空间，并且允许访问者单击一个标签页来访问小块空间中的内容。鼠标光标移动到链接、表单字段以及其他HTML元素上的时候，带有附加信息的弹出工具提示窗口将提供补充信息。控制页面内容的一种逐渐流行的方法是幻灯片，这是页面上的一种窗口，其内容会滑入或滑出视线。幻灯片允许你显示内容，并且通常用在主页上。

你将学会构建自己的交互式小配件的一些有用的技术：例如，如何确定浏览器窗口大小、一个页面元素，以及元素在页面上的位置。

10.1　把信息组织到标签页面板

在页面上放置太多的内容可能会让访问者应接不暇，并且使得页面看起来很拥挤。JavaScript允许你以多种方式来在一个很小的空间里展示很多的信息。一种技术就是标签页面板效果。标签页面板由顶部的标签和每次只能看见一个的面板组成。当访问者单击标签，当前可见的面板消失，隐藏的面板显示，如图10-1所示。

图10-1：标签页面板在电子商务站点上的应用很普遍，其中的信息常常要显示在各个不同的面板中。这个示例（只是一个完整的We b页面的一部分）在不同的面板中展示了产品概览、产品说明和配送信息，因此，访问者可以单击一个标签来查看他们感兴趣的信息标签页面板就像所有的用户交互式小配件一样，是由HTML、CSS和JavaScript程序组成的。有很多种方法来处理这些组件中的每一个，但后面将介绍一种直接且简单的方式。

10.1.1　HTML

带有标签页的面板有两个主要组成部分：第一部分是标签页，这是在面板的顶部或底部并排出现的按钮；第二部分是面板，这是包含了要显示的内容的＜divs＞。此外，一些其他的标签有助于组织内容和使得编程变得容易：

·包装器元素。这不是严格必需的，但是，如果你在一个页面中包含了多个标签页面板，如果有一个＜div＞标签能够包围起标签页和面板，将有助于标注标签页面板的开始处和结尾处，并且可以使编程变得更为容易。做到这点的HTML很简单：

＜div class="tabbedPanels"＞

＜/div＞

给div添加一个class，将有助于识别这个div，同时，也为样式化标签页面板中的元素提供了一个钩子，并且可以供jQuery用来识别和选择标签页和面板。如果在一个页面上只有一个单个的标签页面板，一个ID就足够了。

·标签通常是以无序的列表项的结构来组织的，它们之间带有链接：

＜ul class="tabs"＞

＜li＞＜a href="#panel1"＞Overview＜/a＞＜/li＞

＜li＞＜a href="#panel2"＞Specifications＜/a＞＜/li＞

＜li＞＜a href="#panel3"＞Shipping＜/a＞＜/li＞

＜/ul＞

列表项中的链接是指向分配给面板的ID的页内链接（后面将会介绍）。指向面板的链接使得那些不支持JavaScript的访问者也可能直接跳转到相应的内容，就像是一个常规的页内链接一样，只不过它直接向上滚动页面到达相应的位置。

注意：如果你不熟悉页内链接，可以从www.yourhtmlsource.com/tex t/internallinks.html找到一个简单的介绍。

·面板包装器。用一个＜div＞标签包围起所有的面板，将有助于样式化，并且提供了一种方法使用jQuery来聚焦于标签页：

＜div class="panelContainer"＞

＜/div＞

·面板是内容所在的地方。每个面板用一个＜div＞标签来表示，并且可以容纳你想要放置的内容，诸如标题、段落、图像和其他的div。每个＜div＞应该有一个独特的ID，这和标签页链接（参见前面的内容）的HREF中使用的ID相匹配：

＜div class="panel"id="panel1"＞

＜！—put content here—＞

＜/div＞

＜div class="panel"id="panel2"＞

＜！—put content here—＞

＜/div＞

＜div class="panel"id="panel3"＞

＜！—put content here—＞

＜/div＞

给每个面板div添加一个class是个好主意，例如，class="panel"，因为它提供了另一种方法来样式化这些元素，并且可以使用jQuery选择它们。

所有这些面板div位于面板包装器div和主包装器元素之中。用于3个标签页面板集合的基本结构的HTML如下所示：

＜div class="tabbedPanels"＞

＜ul class="tabs"＞

＜li＞＜a href="#panel1"＞Overview＜/a＞＜/li＞

＜li＞＜a href="#panel2"＞Specifications＜/a＞＜/li＞

＜li＞＜a href="#panel3"＞Shipping＜/a＞＜/li＞

＜/ul＞

＜div class="panelContainer"＞

＜div class="panel"id="panel1"＞

＜！—put content here—＞

＜/div＞

＜div class="panel"id="panel2"＞

＜！—put content here—＞

＜/div＞

＜div class="panel"id="panel3"＞

＜！—put content here—＞

＜/div＞

＜/div＞

＜/div＞