使用 JavaScript 的 3D 客户端选项卡视图
4.10/5 (10投票s)
轻松地将 3D Tabstrip 页面添加到 ASP.NET 项目中。
引言
有几个服务器端选项卡控件可用于 ASP、PHP 和 JSP 等。例如，通过组合 ASP.NET 的 MultiView 和 Menu 控件，可以将 2D 选项卡添加到任何 ASPX 页面。但是，每次用户单击选项卡按钮时，此类页面都会回发到服务器。在某些情况下，这是不必要的，会导致延迟，这可能会让用户感到恼火。
本文介绍了一个客户端 Tabstrip，它仅在必要时才发布到服务器。选项卡按钮上的点击在浏览器中使用 JavaScript 处理，因此用户不必不必要地等待。
与任何服务器端编程语言兼容
Tabstrip 仅使用 HTML、JavaScript 和 CSS 开发。因此，它可以添加到任何 Web 应用程序项目中，而与使用的服务器端编程语言无关。 Tabstrip 具有几个有用的功能，例如
- 仅当用户执行需要回发的操作时，才进行与服务器的往返。
- 它在 Internet Explorer 和 Firefox Web 浏览器中同样有效。
- 选项卡按钮具有 3D 外观，类似于“Windows 经典”桌面应用程序。
Tabstrip 页面的一个典型用途是用作 Web 应用程序“选项…”窗体，该窗体可以显示在弹出窗口中。例如，Tabstrip 页面看起来类似于“Internet 选项”弹出窗口，可以通过 Internet Explorer 中的“工具”菜单访问。
如何将 Tabstrip 页面添加到您的 ASP.NET 项目
可以将 Tabstrip 添加到在任何开发环境中创建的项目。但是，它旨在方便在 Microsoft Visual Studio 2008 或 Visual Web Developer Express 2008（免费）中使用。您可以按如下方式将 Tabstrip 页面添加到您的 ASP.NET 项目
- 单击下载链接（见上文）以下载 Tabstrip 代码，然后解压缩此文件。
- 将新的.aspx 或 .html 页面添加到您的 ASP.NET 项目（为此页面提供一个适合您项目的名称）。
- 在文本编辑器（例如记事本）中打开解压缩的 TabStrip.html 文件 - 但不要将此文件添加到您的项目。
- 将 TabStrip.html 文件中的代码粘贴到新页面中的
<html>...</html>的顶部 - 但不要粘贴到 .aspx 页面的顶行上。 - 将解压缩的 TabStrip.css 和 TabStrip.js 文件添加到您的 ASP.NET 项目。
结果页面如下所示在 Visual Studio 2008 设计器中。控件可以从工具箱中拖放到选项卡上，如屏幕截图所示。可以在设计器中调整选项卡的大小，当 Tabstrip 页面出现时，Tabstrip 将自动调整自身大小以适应。
如何向 Tabstrip 添加新选项卡
可以通过简单地复制、粘贴，然后编辑描述现有选项卡的 HTML 来添加新选项卡。
例如，要添加选项卡 3，您可以复制并粘贴描述选项卡 2 的三段 HTML，然后像这样更改它们的 id 属性： id="tabtop3" 和 id="3" 和 id="tab3"，如下所示。选项卡按钮的宽度 <td...> 也需要更改以匹配新按钮标签的宽度，使用 style="width: 38px;"，如下所示。
<td id="tabtop3" class="tabTopFiller"/><td/>
.
.
.
<td id="3" class="tabButton" style="width: 38px;" onclick='showTab(this.id)'>
Button
</td>
<td class="tabRightFiller"/>
.
.
.
<div id="tab3" class="tabDiv" style="height: 150px; width: 470px;">
This is Tab three
</div><br/>