网页的简单 TabView

• 下载源代码和演示项目 - 69.5 Kb

引言

在某些情况下，我们需要显示若干个相关的页面。 与其将它们显示为简单的链接，本文讨论的选项卡视图表示方式可以提供更清晰的视图。 此组件使用纯 DHTML、层叠样式表和 JavaScript 实现选项卡控件。 演示项目展示了如何在你的 .asp 页面中使用此组件。

使用代码

以下是在 ASP 页面中创建 Tabview 的步骤。 CSS 样式部分可以根据你的要求进行更改。

为 Tabview 组件创建一个对象。

'Create the Object for the TabView Component

set TabView = Server.CreateObject("TabView.Tabs")

为活动选项卡和非活动选项卡指定 CSS 类。 如果需要固定长度的选项卡，则指定宽度，否则将其设置为零。

'Styles - width of each tab (give 0 to provide self width)

'Active tab style from CSS

'In active tab style from CSS

TabView.Styles 0, "ActiveTab", "InActiveTab"

指定 Images 文件夹的路径。

'Path of the images folder

TabView.ImagePath "images"

现在，只需按照以下语法添加选项卡即可。

TabView.add "Info","Info Page","openfold.gif",
         "clsdfold.gif","Info_Page.asp"

关于使用的一些说明

• 选项卡将按照上述添加的顺序显示。
• 可以为活动和非活动选项卡使用不同的图像。
• 可以将任何查询字符串值添加到要重定向的页面，例如如下所示：

  TabView.add "Info","Info Page","openfold.gif","clsdfold.gif",
    "Info_Page.asp?Query=New_Page"

• 所有选项卡页面的 <FORM> 标签应遵循 POST 方法。
• 所有选项卡页面的 <FORM> 标签内需要一个隐藏字段 hdnQS，但是此隐藏字段的名称可以更改。
• 可以通过调用 JavaScript 函数 PostForm(arg1,arg2) 来重定向到特定的选项卡页面。 arg1 是要重定向到的选项卡页面，而 arg2 是 TABID。

  

  <A href=javascript:PostForm('Info_Page.asp','Info')>
      Take me to Information Page</A>

如何使用

• 将文件解压缩到本地系统。
• 创建一个指向 Tabview 文件夹的虚拟目录。
• 运行批处理文件 registerDLL.bat
• 浏览该目录，例如：https:///...<你的本地路径>/Tabview/Info_Page.asp
• 现在你可以使用 TabView 了。

玩得开心！