首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
 编程学堂> JAVA专区 | .NET专区 | PHP 专区 | ASP 专区 |  C/C++   | JAVASCRIPT |  数据库  | 软件工程 | 网络技术 | 网站制作 | 编程相关 | 硬件资讯
 业界相关> 业界新闻 | 操作系统 | 办公技巧 | 病毒安全 | 图形图像 |  常用工具  | 资源下载 | 网站推广 | 即时通讯 |  IT故事  |  IT健康  | QQ---MSN
※高级搜索
您当前的位置： 主页>编程相关>JAVASCRIPT>javascript实现类似IE7中的Tab效果
javascript实现类似IE7中的Tab效果
来源： 发布时间：2007-11-10 发布人： 浏览： 人次   字体： [大 中 小]  

先看个效果图：

运行效果图 

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 onmouseout="this.className='menu_p_mouseout'" onmouseover="this.className='menu_p_mouseover'" ><a href="javascript:void(0);" onclick='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)" onclick="JavaScript:closeIFrame("+arr[i]+");" ><sup>x</sup></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)" onclick="JavaScript:closeIFrame("+parseInt(objLastTabIndex.value)+");" ><sup>x</sup></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 onmouseout="this.className='menu_p_mouseout'" onmouseover="this.className='menu_p_mouseover'" ><a href="JavaScript:void(0);" title='使用方向键更快捷' onclick='JavaScript:buildTabBar("+arr[i]+");'>查询"+arr[i]+"</a> <a href="JavaScript:void(0);" title="关闭查询(快捷键:C)" onclick="JavaScript:closeIFrame("+arr[i]+");" ><sup>x</sup></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 = "/";//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