类似IE7中Tab效果

先看个效果图：

 

Html页面代码：

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< html >
< head >
     < title > create iframe </ title >
     < link  href ="baseStyle.css"  type ="text/css"  rel ="stylesheet" >

    < script  language ="JavaScript" > ...
<!--
//***********************************************

// Author:      Xiaojun.Liu

// Create date: 2007.05.23

//*************************************************
//初始化TabBar
function initTabBar()
...{
    var objLastTabIndex = document.getElementById("hidLastTabIndex");
    var objTabsIndex = document.getElementById("hidTabsIndex");

    objLastTabIndex.value = "0";
    objTabsIndex.value = "0,";

    buildTabBar(-1);
}

//新增一个TabBar
function buildTabBar(newIndex)
...{
    var objCurTabsIndex = document.getElementById("hidCurTabIndex");
    var objLastTabIndex = document.getElementById("hidLastTabIndex");
    var objTabsIndex = document.getElementById("hidTabsIndex");
    var objTabBar = document.getElementById("tabbar");

    if(newIndex==0) //进行新增操作
    ...{
        //新增Tab
        objLastTabIndex.value = parseInt(objLastTabIndex.value) + 1;
        objTabsIndex.value = objTabsIndex.value + objLastTabIndex.value + ",";
        objCurTabsIndex.value = parseInt(objLastTabIndex.value) + 1;
        
        //加载新建iFrame
        createIFrame(parseInt(objLastTabIndex.value));
    }
   
    //字符串
    var strHtml = "";
    var strHtmlBegin = "<table border=0 cellpadding=0 cellspacing=0 width=100% ><tr>";
    var strHtmlEnd = "<td >&nbsp;</td></tr></table>";
    
    var strBtnCreate = "<td width=80 align=center class=menu_p_mouseout οnmοuseοut="this.className='menu_p_mouseout'" οnmοuseοver="this.className='menu_p_mouseover'" ><a href="javascript:void(0);" οnclick='JavaScript:buildTabBar(0);' title='新建查询(快捷键:N)'>新查询(N)</a></td>";

    var arr = objTabsIndex.value.split(",");
    for(var i=0;i<arr.length-1;i++)
    ...{
         if(parseInt(arr[i])>0)
         ...{
            if(parseInt(arr[i])==parseInt(newIndex) && parseInt(newIndex)!=0)
            ...{
                objCurTabsIndex.value = parseInt(arr[i]);

                document.getElementById("iframe_"+arr[i]).style.display = "";
                strHtml += "<td width=70 align=center id=btnTab_"+arr[i]+" class=menu_p_selected >查询"+arr[i]+" <a href="JavaScript:void(0);" title="关闭查询(快捷键:C)" οnclick="JavaScript:closeIFrame("+arr[i]+");" >^x</a></td>";
            }
            else
            ...{
                if(parseInt(newIndex)==0 && parseInt(arr[i])==parseInt(objLastTabIndex.value))
                ...{
                    objCurTabsIndex.value = parseInt(parseInt(objLastTabIndex.value));

                    document.getElementById("iframe_"+parseInt(objLastTabIndex.value)).style.display = "";
                    strHtml += "<td width=70 align=center id=btnTab_"+parseInt(objLastTabIndex.value)+" class=menu_p_selected >查询"+parseInt(objLastTabIndex.value)+" <a href="JavaScript:void(0);" title="关闭查询(快捷键:C)" οnclick="JavaScript:closeIFrame("+parseInt(objLastTabIndex.value)+");" >^x</a></td>";
                }
                else
                ...{
                    document.getElementById("iframe_"+arr[i]).style.display = "none";
                    strHtml += "<td width=70 align=center id=btnTab_"+arr[i]+" class=menu_p_mouseout οnmοuseοut="this.className='menu_p_mouseout'" οnmοuseοver="this.className='menu_p_mouseover'" ><a href="JavaScript:void(0);" title='使用方向键更快捷' οnclick='JavaScript:buildTabBar("+arr[i]+");'>查询"+arr[i]+"</a> <a href="JavaScript:void(0);" title="关闭查询(快捷键:C)" οnclick="JavaScript:closeIFrame("+arr[i]+");" >^x</a></td>";
                }
            }
        }
    }

    //写TabBar
    objTabBar.innerHTML = strHtmlBegin + strHtml + strBtnCreate + strHtmlEnd;
}

function closeIFrame(index)
...{
    var objCurTabsIndex = document.getElementById("hidCurTabIndex");
    var objLastTabIndex = document.getElementById("hidLastTabIndex");
    var objTabsIndex = document.getElementById("hidTabsIndex");
    //
    objTabsIndex.value = objTabsIndex.value.replace(index+",","");
    var arr = objTabsIndex.value.split(",");
    objLastTabIndex.value = arr[arr.length-2];
    
    if(parseInt(arr[arr.length-2])==0)
    ...{
        objCurTabsIndex.value = -1;
        buildTabBar(-1);
    }
    else
    ...{
        if( parseInt(objCurTabsIndex.value) != parseInt(index) )
        ...{
            objCurTabsIndex.value = parseInt(objCurTabsIndex.value);
        }
        else
        ...{
            objCurTabsIndex.value = parseInt(arr[arr.length-2]);
        }        
        buildTabBar(parseInt(objCurTabsIndex.value));
    }
    //
    //document.getElementById("iframe_"+index).style.display = "none";
    document.getElementById("iframe_"+index).removeNode(true);
}


//创建iFrame
function createIFrame(index)
...{
    element=document.createElement("iframe");//1
    element.src = "http://www.baidu.com/";//2这里可以使用变量
    element.id = "iframe_"+index;//3
    element.className = "iframe";//4
    document.all.Form1.appendChild(element);//10
}

//通过方向键调整Tab
function onHotKey(hotKey)
...{
    var leftKey = 37;    //方向键Left
    var rightKey = 39; //方向键Right
    var nKey = 78;    //新增Tab
    var cKey = 67;    //关闭Tab

    var objCurTabsIndex = document.getElementById("hidCurTabIndex");
    var objTabsIndex = document.getElementById("hidTabsIndex");

    var leftTabIndex = -1;
    var rightTabIndex = -1 ;

    var arr = objTabsIndex.value.split(",");
    for(var i=0;i<arr.length-1;i++)
    ...{        
        if( parseInt(objCurTabsIndex.value)==parseInt(arr[i]) ) 
        ...{
            //
            if( (i-1)<0 )
            ...{
                leftTabIndex = -1;
            }
            else if( (i-1)==0 )
            ...{
                leftTabIndex = arr[1];
            }
            else
            ...{
                leftTabIndex = arr[i-1];
            }
            //
            if(rightTabIndex==0)
            ...{
                rightTabIndex = -1;
            }
            else if( (i+1)>(arr.length-2) )
            ...{
                rightTabIndex = arr[arr.length-2];
            }
            else
            ...{
                rightTabIndex = arr[i+1];
            }
        }
    }

    //新增Tab
    if(hotKey==nKey)
    ...{
        buildTabBar(0);
    }

    //关闭Tab
    if(hotKey==cKey)
    ...{
        if(parseInt(objCurTabsIndex.value)>0)
        ...{
            closeIFrame(parseInt(objCurTabsIndex.value));
        }
    }

    //向左移动Tab
    if(hotKey==leftKey)
    ...{
        if(leftTabIndex < 0)
        ...{
            objCurTabsIndex.value = -1;
        }
        else 
        ...{
            objCurTabsIndex.value = leftTabIndex;
        }
        //
        buildTabBar(leftTabIndex);
    }
    //向右移动Tab
    if(hotKey==rightKey)
    ...{
        if(rightTabIndex < 0)
        ...{
            objCurTabsIndex.value = -1;
        }
        else 
        ...{
            objCurTabsIndex.value = rightTabIndex;
        }
        buildTabBar(rightTabIndex);
    }
}

//-->
         </ script >

</ head >
< body  onload ="javascript:initTabBar();"  onkeydown ="JavaScript:onHotKey(window.event.keyCode);" >
     < form  id ="Form1"  method ="POST"  action ="" >
         < div  id ="tabbar"  class ="p_header" >
         </ div >
         < input  type ="hidden"  id ="hidTabsIndex"  value ="0," >
         < input  type ="hidden"  id ="hidLastTabIndex"  value ="0" >
         < input  type ="hidden"  id ="hidCurTabIndex"  value ="-1" >
     </ form >
</ body >
</ html >

 

样式表文件 baseStyle.css

 

body  {...} {
    font-family: verdana; 
    font-size:11px;
    color:#3F3F3F; 
}

td
{...} {
    font-family:Tahoma;
    font-size:12px;
}

a
{...} {
  color:#1B73BA;
  text-decoration:none; 
}

a:hover
{...} {
  color:#FF0000;
  text-decoration:none; 
}



.TextBox
{...} {
  font-family: verdana; 
  font-size: 11px; 
  color:#000000;
}

.TextBox_Readonly
{...} {
    font-family: verdana; 
    font-size: 12px; 
    background-color:#F6F6F6;
         
    PADDING-LEFT: 0px; 
    PADDING-RIGHT: 0px;
    PADDING-TOP: 4px; 
    PADDING-BOTTOM: 2px; 
}

.TextBox_MultiLine
{...} {
  font-family: verdana; 
  font-size: 11px; 
  border:1px solid #DCEFFA; 
  color:#000000;
}


.Button
{...} {
    BORDER-LEFT: #F0F8FF 1px solid;
    BORDER-RIGHT: #F0F8FF 2px solid;
    BORDER-TOP: #F0F8FF 1px solid; 
    BORDER-BOTTOM: #F0F8FF 2px solid;
         
    PADDING-LEFT: 5px; 
    PADDING-RIGHT: 5px;
    PADDING-TOP: 4px; 
    PADDING-BOTTOM: 2px; 
    
    FONT-FAMILY: verdana; 
    FONT-SIZE: 13px; 
    FONT-WEIGHT: none;

    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#B3D997); 
    
    CURSOR: hand; 
    COLOR: #18345F; 
    HEIGHT: 25px;
}     


.menu_p_mouseout  {...} {
    BORDER-LEFT: #FFFFFF 1px solid;
    BORDER-RIGHT: #FFFFFF 0px solid;
    BORDER-TOP: #FFFFFF 0px solid; 
    BORDER-BOTTOM: #FFFFFF 0px solid;
         
    PADDING-LEFT: 2px; 
    PADDING-RIGHT: 2px;
    PADDING-TOP: 2px; 
    PADDING-BOTTOM: 0px; 
    
    FONT-FAMILY: verdana; 
    FONT-SIZE: 14px; 
    FONT-WEIGHT: none;

    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=Silver); 
    
    CURSOR: hand; 
    COLOR: #18345F;     
    HEIGHT: 30px;
}

.menu_p_mouseover  {...} {
    BORDER-LEFT: #FFFFFF 1px solid;
    BORDER-RIGHT: #FFFFFF 1px solid;
    BORDER-TOP: #FFFFFF 1px solid; 
    BORDER-BOTTOM: #FFFFFF 1px solid;
         
    PADDING-LEFT: 2px; 
    PADDING-RIGHT: 2px;
    PADDING-TOP: 2px; 
    PADDING-BOTTOM: 0px; 

    FONT-FAMILY: verdana; 
    FONT-SIZE: 14px; 
    FONT-WEIGHT: bold;

    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=Silver); 
         
    CURSOR: hand; 
    COLOR: #18345F; 
    HEIGHT: 30px;
}


.menu_p_selected  {...} {
    BORDER-LEFT: #FFFFFF 1px solid;
    BORDER-RIGHT: #FFFFFF 1px solid;
    BORDER-TOP: #FFFFFF 1px solid; 
    BORDER-BOTTOM: #FFFFFF 1px solid;
         
    PADDING-LEFT: 2px; 
    PADDING-RIGHT: 2px;
    PADDING-TOP: 2px; 
    PADDING-BOTTOM: 0px; 

    FONT-FAMILY: verdana; 
    FONT-SIZE: 14px; 
    FONT-WEIGHT: bold;

    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=Silver); 
         
    COLOR: #18345F; 
    HEIGHT: 30px;
}


.p_header  {...} {
    BORDER-LEFT: #FFFFFF 0px solid;
    BORDER-RIGHT: #FFFFFF 0px solid;
    BORDER-TOP: #FFFFFF 0px solid; 
    BORDER-BOTTOM: #FFFFFF 1px solid;

    PADDING-LEFT: 4px; 
    PADDING-RIGHT: 2px;
    PADDING-TOP: 2px; 
    PADDING-BOTTOM: 0px; 
         
    FONT-FAMILY: verdana; 
    FONT-SIZE: 12px;
    height: 30px;
    
    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=Silver, EndColorStr=#FFFFFF);
}


.iframe
{...} {
    BORDER-TOP: #CAD9EE 1px solid; 
    BORDER-BOTTOM: #CAD9EE 1px solid;
    BORDER-LEFT: #CAD9EE 1px solid;  
    BORDER-RIGHT: #CAD9EE 1px solid;    
    WIDTH: 100%;
    HEIGHT: 90%;    
}