JavaScript 中的一个选项卡式对话框

• 下载源代码 - 30.7 KB

引言

许多基于服务器的技术通过提供一组控件来简化 Web 编程，这些控件实现了长期以来在基于客户端的应用程序中存在的控件类型。 其中一个有助于组织大量数据的控件是选项卡式对话框控件。 但是，如果您使用的技术没有基于服务器的选项卡式对话框控件怎么办？ 本文介绍如何仅使用 JavaScript 实现用户看到的选项卡式对话框，完全在客户端运行。

背景

选项卡式对话框控件的功能需要一个或多个选项卡，用户单击这些选项卡以显示该选项卡的数据。 通常，每个选项卡代表要操作的整个数据的子集。 例如，有关客户的数据可能太多，无法一次显示。 选项卡式对话框可以将客户数据分段为人口统计数据（姓名、地址、城市、州、邮政编码等）、联系方式数据（主要联系人、次要联系人等）和其他数据（信用额度、账户余额、付款历史等）。 每个段（人口统计、联系方式和其他）都有一个选项卡。 当单击特定选项卡时，只会显示该段中的数据。 所有其他数据都将被隐藏。

目前，没有实现选项卡式对话框的 HTML 对象。 但是，我们可以只用一点 JavaScript 来模拟一个。

使用代码

选项卡式对话框的本质是将数据项分组在一起，并且仅在单击特定选项卡时才显示。 其他组中的数据对用户隐藏。 要在 JavaScript 中执行此操作，我们需要使用允许我们将数据分组在一起的 HTML 标签。 该标签是 <DIV>，它允许我们将属于一个组的数据项分组在一起。 另一个要求是我们必须能够显示和隐藏数据组，以便一次只能看到一个组。

为了区分一个 <DIV> 与另一个 <DIV>，我们需要包含 ID 属性。 我们可以为 ID 使用任何我们想要的值，但是每个 div 必须具有唯一的 ID 值。 div 标签看起来像这样

<DIV id="demoTabId"> ... </div>

使数据不可见

乍一看，我们可能很想使用 visibility 样式属性，但这不适用于我们想要的内容。 visibility 样式属性可以使我们的数据不可见，但它仍然会占用页面上的相同空间。 我们不希望那样！ 我们希望任何可见的数据都显示在页面上的相同位置。 为了使数据不可见并且不占用页面上的任何空间，我们将使用 display 样式属性。 将 display 样式属性设置为 none 将使其不可见，并且它不会占用页面上的任何空间。 正是我们想要的。

选项卡

实现选项卡很容易。 如果我们不关心它们是否真的看起来像选项卡，我们可以使用普通的 HTML 按钮。 这些按钮的定义如下

<INPUT Type="button" Value="Demographics" OnClick="javascript:displayTab('demoTab');">

如果我们希望选项卡实际上看起来像选项卡，我们可能会使用一组创建得看起来像选项卡的图像。 <IMG> 控件的 OnClick 事件与上面按钮控件的事件相同。

JavaScript 代码

执行实际工作的 JavaScript 代码非常简单。 要显示选项卡，代码会将 [ctrlId].style.display='block' 设置为 show，另外，我们将其他选项卡设置为 [ctrlId].style.display='none'。 看起来像这样

function displayTab(tab)
{
    // set all the tabs to not display
    demoTabId.style.display = "none";
    contactTabId.style.display = "none";
    otherTabId.style.display = "none";
    // set the selected tab to display
    var ctrl = document.getElementById(tab)
    ctrl.style.display = "block";
}

调用此 JavaScript 代码并传递 div 标签的 ID 值将仅显示选定的选项卡并隐藏所有其他选项卡。

摘要

仅使用 JavaScript 模拟选项卡式对话框是一种简单有效的方法，仅显示用户想要查看和操作的数据。