涵盖一切的标签页

• 下载源代码 - 2.36 KB

引言

如果您曾经尝试在浏览器中使用 <div>，您会很快发现存在一些限制。 其中一些限制已被更正在 IE 7 的最新版本中进行了修改。但是，由于大多数人可能尚未使用此新版本，或者他们从未打算使用，因此我决定找出绕过这些限制的方法。 最让我沮丧的限制是在 <select> 上使用 div 时，select 总是获胜并将显示在顶部 - 永远如此。您不能使用 z-index 或类似的东西。 要理解这个问题，请阅读这篇很棒的文章这里。许多人在使用菜单时会立即发现这个问题，这些菜单会下拉到包含下拉列表的表单上，或者任何带有“select”标签的其他内容。 当我使用工具提示、气球提示、弹出窗口、淡入淡出以及任何其他提供附加信息的内容时，也会发生此问题。 解决此问题的关键是考虑 iframe。 您可以使用 iframe 构建您的 div，然后在最后时刻将 div 加载到 iframe 的顶部。 这听起来很容易，但有几个问题需要考虑。 我们将在下面分别研究这些问题。 我去过几个使用“选项卡”样式来提供额外信息的网站，我真的很喜欢这种通知类型。

注意：虽然这是一个非常简单的例子，但实现是无限的。 想想使用 AJAX 在选项卡中动态显示数据，或者其他任何东西。 创建逼真选项卡的秘诀是使用透明图像 (1x1)。 这有助于确保表格中的单元格精确设置为您想要的尺寸。 您可以从下面看到这一点。 让我们从查看样式表开始。

背景

我采用了这个想法，并决定展示如何使用我最喜欢的工具提示样式之一来实现它。 我将鼠标悬停在选项卡上。 此代码将使用此方法，但重要的是要意识到您可以将其用于任何事情。

Using the Code

这段代码分为三个部分。 第一部分是样式表。 第二部分是实际的 JavaScript。 第三部分是调用它的标签。 我意识到可以对它进行很多增强。 示例包括当选项卡位于页面底部或屏幕最右侧时移动选项卡，我欢迎任何人进一步扩展它，但这显示了使用 iframe 的过程。 我已经在 Firefox、IE 6 和 7 中稍微测试了这段代码，它似乎可以工作。 如果有人发现此代码有任何问题，请发表评论。

首先，使用以下样式类型....

/* This is the div which will hold the tab */
#tagcontainer
{
    position:absolute; 
    top:25px; 
    left:50px; 
    padding-left:0px ; 
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    border-top-style: none; 
    border-right-style: none; 
    border-left-style: none;
    border-bottom-style:none;
    display:none; 
    background-color:red; 
    color:black; 
    z-index:100;
    width:100%
}
/* This defines the Iframe --Needed for IE 6 and older */
#Someiframe
{
    position:absolute; 
    background-color:#F4F878;
    top:0px; 
    left:0px; 
    display:none;
}
/* This is the style to let people know that there 
   is more information about on this text. */
.info {
    border-left: 1px;
    border-right: 1px;
    border-bottom: #F4F878 1px dotted;
    padding-left:1px;
    padding-right:1px;
}
/* This starts the creation of the tab when the item is hovered over */
.info:hover{
    border-left: black 1px solid;
    border-right: black 1px solid;
    border-bottom:0px;
    border-top: #828507 2px solid;
    background-color: #F4F878;
    padding-left:0px;
    padding-right:0px;
    cursor:pointer
}
#fldtag {
    padding:-2px 2px -2px 2px;
    background-color: #F4F878;
}
#fldtag .topleft{
    border-left: #828507 1px solid; 
    height:0px; 
    vertical-align: top; 
    font-size:6px
}
#fldtag .topcenter{
    border-top: #828507 1px solid; 
    width: 100%; 
    height:0px;
    vertical-align: top;
    font-size:1px
}
#fldtag .topright{
    border-top: #828507 1px solid; 
    border-right: #828507 1px solid; 
    height:0px;
    vertical-align: top;
    font-size:1px
}
#fldtag .midleft{
    border-right: #828507 1px solid;
    border-left: #828507 1px solid;
}
#fldtag .btm{
    border-bottom: #828507 1px solid; 
    border-right: #828507 1px solid;
    border-left: #828507 1px solid;
    height:3px
}
</style> 

您可以尝试使用不同的样式，但 #fldtag 是用于使选项卡显示为选项卡的样式。

下一步是查看 JavaScript。 我必须承认，我借用了在其他地方找到的代码来帮助循环父窗口以捕获标签的确切位置，但我对其进行了修改以适应 Firefox。 我试图使其非常通用，以便它可以在大多数浏览器上运行。

<script type="text/javascript" language="javascript"> 
var ie4=document.all
var ns6=document.getElementById&&!document.all
if(ie4||ns6)
{
    document.write('<div id="tagcontainer"></div>')
    document.write('<iframe id="Someiframe" ' + 
       'src="javascript:false;" scrolling="no" ' + 
       'frameborder="0" ></iframe>')
}
//*****************************************************************************
//Returns the dimensions of the top and left from the outter most part of the
//parent to the present obj
//******************************************************************************
function getposOffset(what, offsettype){
    //If it does not equal left then it must be top
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null)
    {
        totaloffset=(offsettype=="left")? 
                     totaloffset+parentEl.offsetLeft : 
                     totaloffset+parentEl.offsetTop;
        parentEl=parentEl.offsetParent;
    }
    return totaloffset;
}

function ShowTab(txt,tabwidth,tabheight,obj,e) 
{ 
    IfrRef=document.getElementById? 
           document.getElementById("Someiframe") : Someiframe
    divRef=document.getElementById? 
           document.getElementById("tagcontainer") : tagcontainer
    if (tabwidth==undefined){tabwidth=100;}     /* TabWidth is not passed in */
    if (tabheight==undefined){tabheight=200;}   /* TabHeight is not passed in */
    
    //Tab Container must be at least the same size as the object text. 
    if (obj.offsetWidth>tabwidth){tabwidth=obj.offsetWidth} 
    IfrRef.style.left=IfrRef.style.top=-500
    IfrRef.style.width=tabwidth + "px"
    IfrRef.x=getposOffset(obj, "left")
    IfrRef.y=getposOffset(obj, "top")-2
    IfrRef.style.left=IfrRef.x +"px"                        
    IfrRef.style.top=IfrRef.y+ obj.offsetHeight +"px"  
    IfrRef.style.visibility="visible"
    IfrRef.style.width=tabwidth +"px"        //Width of the ToolTip
    IfrRef.style.height=tabheight + "px"      //Height of the ToolTip
    IfrRef.style.display = "block"; 
    var tabgap=obj.offsetWidth-2        /* Determines the gap of the tab */
        
    //'Display the text to add into the tooltip
    var mtable 
    mtable="<table id=\"fldtag\" height=\"" + 
           tabheight + "\ width=\"" + tabwidth + 
           "px\" cellpadding=\"0\" cellspacing=\"0\ valign=\"top\" >"
    
    mtable+="<tr>"
    //Top Left Cell
    mtable+="<td class=\"topleft\">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"" + 
            tabgap + "px\" height=\"1px\" />"
    mtable+="</td>"
    
    //Top Center Cell
    mtable+="<td class=\"topcenter \">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"100%\" height=\"1px\" />"
    mtable+="</td>"
    
    //Top Right Cell
    mtable+="<td class=\"topright\">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"1px\" height=\"1px\" />"
    mtable+="</td>"
    mtable+="</tr>"
    
    //Body of the tab
    mtable+="<tr>"
    mtable+="<td style=\"padding-left:3px; padding-right:" + 
            "3px\"colspan=\"3\" class=\"midleft\" valign=\"top\">"
    mtable+="<!-- This is where you place your text for the tab -->"
    mtable+= txt
    mtable+="</td>"
    mtable+="</tr>"
    
    //Bottom of the tab
    mtable+="<tr>"
    mtable+="<td colspan=\"3\" class=\"btm\">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"1px\" height=\"1px\" /></td>"
    mtable+="</tr>"
    mtable+="</table>"
 
    divRef.innerHTML=mtable
    //Creates the IFrame for the IE 6 and lower compatability
    divRef.style.width = IfrRef.offsetWidth + "px"
    divRef.style.height = IfrRef.offsetHeight + "px"; 
    divRef.style.top = IfrRef.style.top; 
    divRef.style.left = IfrRef.offsetLeft+"px"
    divRef.style.zIndex = IfrRef.style.zIndex + 1; 
    divRef.style.display = "block"; 
    divRef.style.visibility="visible"
} 
function HideTab()
{
    var divRef = document.getElementById('tagcontainer'); 
    var IfrRef = document.getElementById('Someiframe'); 
    divRef.style.display = "none"; 
    IfrRef.style.display = "none"; 
} 
</script> 

我相信上面的代码包含足够的注释来帮助您理解这个过程。 本质上，我们正在确定相对于调用对象放置 iframe 的位置。

最后一部分只是使用以下语法调用脚本

<a class="info" 
  onmouseover ="ShowTab('This is very cool and I am glad that '  +
               'it is not to hard to understand',10,50,this,event)" 
  onmouseout="HideTab()">What?</a>

就这样.....

虽然这是我的第一篇文章。 我希望开始发表更多文章，因此欢迎任何建议或评论。

历史

• 1.0.0：已发布