DHTML网页选项卡控件

分享于 

8分钟阅读

Web开发

  繁體

Sample screenshot

介绍

本文介绍如何使用 HTML。JavaScript和CSS实现一个简单的客户端网页选项卡控件。 web选项卡控件是高度可以配置的,允许从本地或者远程源指定内容,在加载页面并自定义它的外观时指定默认的选择选项卡。

设计

实际上,web选项卡控件由用于选项卡和 <IFRAME> 对于主要内容区域:

Design

HTML按钮选项卡和 <IFRAME> 主内容区分为两个 <DIV> 容器对象,以便调整浏览器窗口的结构。

配置

选项卡及其各自的本地/远程内容源在 array 中指定;array 中的每个字符串项表示一个选项卡和它通过"|"管道字符分隔的细节。 注意,每个字符串项后面都跟有一个","逗号,最后一个项除外:

var tabs = new Array
(
 "MSDN|http://msdn.microsoft.com",
 "CNN|http://www.cnn.com",
 "NASA|http://www.nasa.gov", 
 "Google|http://www.google.com|*",
 "Forbes|http://www.forbes.com");

通常,选项卡字符串项的array 中的每个选项卡项都遵循这里模板:

"Tab-text | URI | [*]" 
  • 制表符:这是每个项目的第一部分,代表标签上显示的文本。
  • URI: 这是第一个"|"管道字符之后的第二个部分,它是相应的选项卡URI内容源。

另外,在指定URI后,第二个"|"管道字符后面的"*"通配符将使该特定选项卡成为页面加载的默认选项卡:

"Google|http://www.google.com|*"

最后,在网页的body 中声明 <DIV> 容器对象:

<DIVID="divTabButtons"></DIV><DIVID="divTabFrame"></DIV>

。并且通过调用 tabLoad 方法初始化了web选项卡控件:

<BODYonLoad="tabLoad()">

看看&感觉

web选项卡控件的外观&感觉完全通过CSS的使用来调整。 <IFRAME> 主选项卡内容区域设计由 .tabFrame 样式指定:

.tabFrame
{
 ORDER: 0;
 HEIGHT: 90%;
 WIDTH: 100%;
 BORDER-TOP: #93BEE2 9PX SOLID;
 BORDER-BOTTOM: #93BEE2 9PX SOLID;
 BORDER-LEFT: #93BEE2 9PX SOLID;
 BORDER-RIGHT: #93BEE2 9PX SOLID;
 SCROLLBAR-FACE-COLOR:#6699CC;
 SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
 SCROLLBAR-SHADOW-COLOR:#6699CC;
 SCROLLBAR-ARROW-COLOR:#FFFFFF;
 SCROLLBAR-DARKSHADOW-COLOR:#6699CC;
}

默认情况下,按钮的选项卡设计由 .tabOff 样式定义:

.tabOff
{
 FONT-FAMILY: Verdana;
 FONT-SIZE: 11; 
 FONT-WEIGHT: 700;
 TEXT-ALIGN: CENTER; 
 COLOR: #003399;
 BACKGROUND-COLOR: #c4e0f0; 
 BORDER-BOTTOM: #c4e0f0 1PX SOLID;
 HEIGHT: 25;
 CURSOR: HAND;
}

单击选项卡按钮时,( 选中的选项卡)的设计状态由 .tabOn 样式定义:

.tabOn
{ 
 FONT-FAMILY: Verdana;
 FONT-SIZE: 11; 
 FONT-WEIGHT: 700;
 TEXT-ALIGN: CENTER;
 COLOR: #003399;
 BACKGROUND-COLOR: #93BEE2;
 BORDER-BOTTOM: #93BEE2 1PX SOLID; 
 HEIGHT: 35;
 CURSOR: HAND;
}

如果选中 BORDER-TOP 主选项卡内容区域 .tabFrame的颜色样式属性,则它们必须与选项卡按钮的BORDER-BOTTOM 颜色样式属性相同,因为它们被选定。 这样,当选中选项卡按钮时,它将看作 <IFRAME>的一部分,并提供连续的和一致的外观。 changing的颜色不同,.tabOn.tabOff 样式之间的另一个区别是标签按钮的高度;选中时,标签的高度会增加,使它的看起来像 importance importance。

Align

通过设置全局 tabAlign 变量,选项卡可以对齐 RIGHTCENTER 或者 LEFT 作为图示 上面。

实现

调用 tabLoad 方法时,创建和初始化网页选项卡控件。 首先,对齐选项卡:

HTML += "<P ALIGN="+tabAlign+">";

Then表示标签的字符串项 array 中的每个元素,它将字符串分割为字符串,并使用 .tabOff 样式和一个 tabOnClick 方法来创建一个HTML按钮,并为它的分配一个唯一的标识。

for (var i = 0; i <tabs.length; i++)
{
 var tab = tabs[i].split("|");
 HTML += "<INPUT TYPE='BUTTON' ID="+i+" 
 CLASS='tabOff' VALUE="+tab[0]+" 
 onClick='tabOnClick("+i+")'>";
}

然后将选项卡按钮绑定到 divTabButtons<DIV> 容器对象:

divTabButtons.innerHTML = HTML;

最后,通过进一步拆分下一个"|"管道字符的字符串,tabLoad 方法将查找哪个 array 字符串项( 它代表一个标签和它各自的信息) 包含一个"*"通配符。 找到时,它调用传递给它的tabOnClick 方法,即前面创建的相应选项卡按钮的ID:

for (var i = 0; i <tabs.length; i++)
{ 
 var tab = tabs[i].split("|");
 if (tab[2] == "*")
 {
 tabOnClick(i);
 break; 
 }
}

tabOnClick 方法具有指定选项卡按钮的ID的参数。 调用时,它首先将所有选项卡按钮样式设置为默认的.tabOff 样式:

var oElement = null;for (var i = 0; i <tabs.length; i++)
{ 
 oElement = document.getElementById(i);
 oElement.className = "tabOff";
}

然后,借助表示指定选项卡按钮的ID的参数,它将按钮的指定选项卡样式设置为 .tabOn:

oElement = document.getElementById(ID);
oElement.className = "tabOn";

最后,tabOnClick 按钮从选项卡 array 中查找指定选项卡的相关URI内容信息并设置 <IFRAME> SRC 属性用于显示, <IFRAME> 然后绑定到 divTabFrame<DIV> 容器对象:

var tab = tabs[ID].split("|");
divTabFrame.innerHTML = "<IFRAME SRC="+tab[1]+ 
 " CLASS='tabFrame'></IFRAME>";

作为完整触摸,只要选中的选项卡按钮不像按钮那样,文档 body 会被告知:

document.body.focus();

便笺

  • 仅使用IE6测试。

WEB  控制  tab  DHT  Dhtml  
相关文章