DHTML分层网络选项卡

分享于 

16分钟阅读

Web开发

  繁體

介绍

我以前的DHTML选项卡使用 HTML。JavaScript和CSS实现了一个简单的客户端网页标签。 本文使用前一个web选项卡的可以配置性和实现风格,通过提供一个web选项卡的层次化系统来扩展web选项卡,该系统带有可视化的。 也就是说,每个标签都可以包含更多的子标签。 对于UI简单性,标签的层次结构仅限于一个层次。

配置

在 array 和它们各自的本地/远程内容源之间指定了平行于上一个实现;数组中每个字符串项表示一个选项卡,其中的详细信息由"|"管道字符分开。 注意,除了最后一个字符串外,每个字符串项和 array 后面都跟着一个","逗号,最后一个。 然而,与以前的实现不同,每个 array 中的第一个字符串元素定义父选项卡,并且相同 array 中的后续字符串元素定义子标签。 例如 上面 屏幕快照中的选项卡是使用以下配置构造的:

var tabs = new Array
(
 new Array("Google|http://www.google.com/", 
 "News|http://news.google.com/", "Froogle|http://froogle.google.com/"),
 new Array("Microsoft|http://www.microsoft.com/|*", 
 "MSDN|http://www.msdn.com/", 
 "Office|http://office.microsoft.com/home/default.aspx"),
 new Array("Yahoo!|http://www.yahoo.com/", 
 "News|http://news.yahoo.com/", 
 "Finance|http://finance.yahoo.com/", 
 "Mail|http://mail.yahoo.com/")
);

通常,每个 array 中的每个元素都定义父选项卡和随后的元素作为相应的子选项卡。 下面的模板总结了:

"Parent tab-text | URI | [*]", ["Child1 tab-text | URI"], 
 ["Child2 tab-text | URI"], ["ChildX tab-text | URI"],.. .

方括号"[...]"表示可选参数,因此子选项卡是可选的。 下面的截图示例演示如何使用模板:

在指定父选项卡的URI后,第二个"|"管道字符后跟"*"通配符字符将使该特定的父选项卡为默认选项卡: <p>?

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

IE DXImageTransform 筛选器效果可以通过将名为 DXImageTransformFilter的全局变量指定给多个 DXImageTransform 筛选器之一来应用于子。 DXImageTransform 过滤器的几个示例包括:

DXImageTransform.Microsoft.Wheel(duration=2, spokes=5)
DXImageTransform.Microsoft.Barn(duration=2, orientation=horizontal)
DXImageTransform.Microsoft.Blinds(duration=2, bands=5)
DXImageTransform.Microsoft.CheckerBoard(duration=2)
DXImageTransform.Microsoft.Fade(duration=2)
DXImageTransform.Microsoft.GradientWipe(duration=2, wipeStyle=0)
DXImageTransform.Microsoft.Iris(duration=2, irisStyle=STAR)
DXImageTransform.Microsoft.Iris(duration=2, irisStyle=CIRCLE)
DXImageTransform.Microsoft.Pixelate(duration=2, maxSquare=40)
DXImageTransform.Microsoft.Wheel(duration=2, spokes=5)
DXImageTransform.Microsoft.RandomDissolve(duration=0.5)
DXImageTransform.Microsoft.Spiral(duration=2)
DXImageTransform.Microsoft.Stretch(duration=2, stretchStyle=push)
DXImageTransform.Microsoft.Strips(duration=2, motion=rightdown)

有关 DXImageTransform 过滤效果及其配置的更多信息,请参见MSDN中过滤和转换的介绍。 列出的所有 上面 示例 DXImageTransform 过滤器效果都存储到一个名为 DXImageTransformLibrary的array 中;因此,可以构建一个过滤器库。 将全局变量 DXImageTransformFilter 分配给 将使用滤镜库中的随机滤镜效果。 例如:

可视化"淡入淡出"效果 DXImageTransform 过滤器:

var DXImageTransformFilter = 
 "DXImageTransform.Microsoft.Fade(duration=2)"

同样,同样的visual"淡入淡出"效果 DXImageTransform 筛选器,但从库指定:

var DXImageTransformFilter = DXImageTransformLibrary[4];

或者,使用随机 DXImageTransform 滤镜效果:

var DXImageTransformFilter = null;

在脚本中完成web选项卡的配置;final 步骤是声明 HTML <DIV> 网页 body 中的容器对象为:

<DIVID="divTabStrip"><DIVID="divTabFrame">

最后,通过调用 tabOnLoad 函数初始化web选项卡:

<BODYonLoad="tabOnLoad()">

看看&感觉

借鉴以前 DHTML网页标签的实现,看起来标签的&感觉完全用CSS来调整。 为了实现完整性,描述了。 单击选项卡时,它的外观&感觉由 .tabOn 样式定义。 相反,选项卡外观&在它的未选中状态中的定义是由 .tabOff 样式定义的。 为每个 .tabOn & .tabOff 样式配置的属性如本例所示的below,.tabOn 样式:

FONT-FAMILY: Verdana;
FONT-SIZE: 11;
FONT-WEIGHT: 700;
TEXT-ALIGN: CENTER;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #FF9900;
BORDER-BOTTOM: #FF9900 1PX SOLID;
BORDER-TOP: #FF9900 1PX SOLID;
BORDER-LEFT: #FF9900 1PX SOLID;
BORDER-RIGHT: #000000 1PX SOLID;
HEIGHT: 20;
CURSOR: HAND;

同样,选项卡框架的外观&感觉是通过 <IFRAME>.tabFrame 样式调整的,属性可以配置:

BORDER-RIGHT: #FF9900 9PX SOLID;
BORDER-TOP: #FF9900 9PX SOLID;
SCROLLBAR-FACE-COLOR: #6699CC;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
BORDER-LEFT: #FF9900 9PX SOLID; WIDTH: 100%;
SCROLLBAR-SHADOW-COLOR: #6699CC;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
BORDER-BOTTOM: #FF9900 9PX SOLID;
SCROLLBAR-DARKSHADOW-COLOR: #6699CC;
HEIGHT: 95%;

from的要点是,主选项卡内容区域 BORDER-TOP 颜色样式属性必须与选中的选项卡按钮的BORDER-BOTTOM 颜色样式属性相同,例如 .tabOn ,。 这样,当选中选项卡按钮时,它将看作 <IFRAME>的一部分,并提供连续的和一致的外观。

设计

正如前面的实现一样,这里web选项卡又由选项卡的HTML按钮和主内容区域的<IFRAME> 组成。 但是,除了这里实现之外,每个子选项卡的子选项卡都位于单个 table 分区中:

第一个 table 分区是所有父选项卡所在的地方。 父选项卡可以由零个或者多个子选项卡组成。 每个子选项卡集都属于后面唯一的table 分区。

默认情况下,所有子集合( 用来存放子标签的table 分区) 都处于隐藏状态。 在单击父选项卡上填充 <IFRAME> 时,将使用 DXImageTransform 过滤器效果可视化地显示选项卡层次中相应子选项卡的唯一操作。

因为一次只能看到一个 table 除法( 子选项卡子选项卡),这应该消除了由制表符组成的标签条。

实现

使用数组的array 管理选项卡的层次结构;array 中的每个项都是 array 本身。 这纯粹是为了简化网络标签的构造,而不是每次通过一个用户定义的array 循环,实现循环循环,因此只引用一个用户定义的array。

web选项卡是在调用 tabOnLoad 函数时构造的,它是web选项卡构造的"主要"入口点。 声明一个 HTML table,但在 table 完成之前,调用 tabLoadParents()tabLoadChildren() 函数:

HTML += "<TABLE BORDER='0' CELLPADDING='0' CELLSPACING='0' WIDTH='100%'>";
HTML += "<TD ALIGN='LEFT'>";
tabLoadParents();
tabLoadChildren();

in函数通过循环遍历每个 array 查找父选项卡,从每个 tabLoadParents() 中选择第一个字符串元素。 然后在每个 array 中的第一个字符串元素分割每个"|"管道字符,提取字符串的各个部分,并创建带有 .tabOff CSS样式的按钮,以及由 tabOnClick 函数处理的按钮和 onClick 事件:

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

tabLoadParents() 函数中创建的每个HTML按钮都被添加到 table 分区,后者又被附加到前面创建的HTML table。

接下来,tabOnLoad 函数调用 tabLoadChildren() 函数。 tabLoadChildren() 函数首先建立在子选项卡出现时选择了哪些 DXImageTransform 筛选器效果。 如果未选择过滤器,则将从 DXImageTransformLibrary 应用随机筛选器:

if (DXImageTransformFilter == null)
{
 DXImageTransform = DXImageTransformLibrary[Math.round
 ((Math.random()*DXImageTransformLibrary.length-1)+0)];
}

然后,tabLoadChildren() 函数执行它的主要任务,从数组中通过嵌套的数组查找子选项卡的子集合。 for 因为每个中每个元素定义父选项卡,随后的元素定义子选项卡对应的父选项卡;因此,嵌套的子选项卡将被定义为父选项卡。 for -loop从每个 array的第二个位置开始,直到到达每个 array 中的最后一个元素。

for (var i = 1; i <tabs.length; i++)
{
 HTML += "<TD STYLE="+DXImageTransform+" ID=child"+i+">";
 for (var j = 1; j <tabs[i].length; j++)
 {
 var tab = tabs[i][j].split("|"); 
 var childID = i + "" + j;
 HTML += "<INPUT TYPE='BUTTON' ID="+ childID + 
 " CLASS='tabOff' VALUE="+tab[0] + 
 " onClick='tabOnClick("+childID+","+i+","+j+")'>"; 
 }
 HTML += "</TD>;
}

每个代表子标签的字符串元素在"|"pipe字符中被分割为提取字符串的各个部分,并使用 .tabOff 样式和 tabOnClick 函数处理的onClick 事件创建一个HTML按钮。 嵌套后 for 在完成一次迭代之后,搜索子选项卡集合,然后分配自己的分区,然后将它的附加到前面创建的HTML table。 每个 table 分区也分配一个唯一的标识,代表一个子选项卡集。

调用 tabLoadParents()tabLoadChildren() 函数构造各自的父选项卡和子选项卡之后,tabOnLoad() 函数完成前面构造的HTML table,并将它的绑定到 divTabStrip<DIV> 容器对象:

divTabStrip.innerHTML = HTML;

当任何选项卡,父或者子选项卡被单击时,调用 tabOnClick 函数。 这个函数的作用是改变点击标签的样式,并将所有其他标签更改为样式,同时更新 <IFRAME> 内容区域。 函数需要三个参数:IDparentchild。 第一个参数表示单击了选项卡( HTML按钮)的to,这样就可以将 .tabOn CSS类应用于它。 最后两个参数确定嵌套数组中单击选项卡的确切位置,以便在该选项卡中查找有关更新 <IFRAME> 内容的详细信息:

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

在最后一个参数设置为 0的选项卡调用 tabOnClick 函数时,如果调用子选项卡的子选项卡是属于单击的父选项卡的相应子选项卡,则指示调用者是 disappear tab

if (child == 0)
{
 for (var i = 1; i <tabs.length; i++)
 {
 tabHide("child"+i);
 }
 tabShow("child"+ID);
}

tabShow 函数和 tabHide 函数分别显示和隐藏子选项卡集的table 分区。 函数用一个定义 table 除法显示或者隐藏的参数的参数调用。 调用每个函数将选中的DXImageTransform 过滤器应用到相关的table 除法,使用:

var e = document.getElementById(ID);
e.filters[0].Apply();

当调用显示特定的table 分区以显示一组子选项卡时,table 除法可以使用 DXImageTransform 筛选器效果:

e.style.display = "block";
e.filters[0].Play();

同样,如果调用隐藏特定的table 分区以隐藏一组子选项卡,则 table 除法将不可以见且 DXImageTransform 滤镜效果停止:

e.style.display = "none";
e.filters[0].Stop();

便笺

  • 作为快速 Bug/逻辑错误修复,需要在定义任何其他选项卡层次结构数组之前声明一个空嵌套 array:
    var tabs = new Array
    (
     /*BUGFIX*/new Array(),
     new Array("Google|http://www.google.com/|*",
     "News|http://news.google.com/",
     "Froogle|http://froogle.google.com/"),
     new Array(...)
    );
  • DHTML网页选项卡控件中扩展。
  • 仅使用IE6测试。

WEB  tab  Hiera  DHT  Dhtml  
相关文章