仿浏览器tab成效实现 _Web前端

仿浏览器tab效果实现
首先借用和分享下之前同学的成果呵呵因为我认为他的比我的风骚

http://www.iteye.com/topic/652682 留作参考

自己写的一个页面，现在还是一个jsp页面因为时间原因暂时没做直接html测试页，使用时可以参考tab2.jpg 提示 frame出调用使用测试,待重新整理

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="<%=request.getContextPath() %>/js/noRefresh.js" type="text/javascript"></script>
<style>
.tab_li_active {float:left; background:url(img/tab/tab.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_active span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#000000; vertical-align:text-top;}
.tab_li_hidden {float:left; background:url(img/tab/tab_a.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_hidden span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#7D7D7D; vertical-align:text-top;}
.frameClass {width:100%; height:100%;}
A {
COLOR: #7D7D7D; TEXT-DECORATION: none;
}
A:hover {
COLOR: red;TEXT-DECORATION: none;
}
</style>
<script language="javascript">

var tabTagName = "li"; //TAB use tag type
var framesParentNodeId="content"; //TAB Pointing FRAME's parentNode id
var activeClassName="tab_li_active";    //curr active TAB use className
var hiddenClassNmae="tab_li_hidden";    //curr hidden TAB use className
var disBlock="block";                   //display
var disHidden="none";                   //hidden

/** If you need add a new TAB tag into this page,you can try do like this example:
function mzTab(id,content,link)
{
var targetObj = parent.mainFrame;

if(targetObj.mzFexistTab(id)==false)
{
if(targetObj.mzGetTabCount()<=8)
{
targetObj.document.getElementById('tid').innerHTML+="<li id='"+id+"' title='"+content+"' onClick='mzFrameDis("+id+");' class='tab_li_active'><span>"+content+"<a href='#' title='关闭标签' onclick='mzDeleObj("+id+");'>  X  </a></span></li>";
//alert(targetObj.document.getElementById('tid').innerHTML);
}else{
alert('TAB显示数目已达上限，请关闭已打开TAB后继续操作');
return;
}

if(targetObj.mzFexistFrame(id)==false)
{
targetObj.document.getElementById('contents').innerHTML+="<iframe id='f"+id+"' class='frameClass' name='content' src='"+link+"' frameborder='0'></iframe>";
//alert(targetObj.document.getElementById('contents').innerHTML);
}
}

//Pointing the new TAB and new FRAME
targetObj.mzFrameDis(id);
}

// var targetObj = parent.mainFrame;
when you using method not in this page , so you should find relative path of 'main.jsp' from using page.

mail:404810628@qq.com
*/

function mzFrameDis(id){
if(mzFexistTab(id)==false)
{
alert('不存在选择项');
return;
}else{
//当前选择的TAB
mzGetActiveTab(id);
}

if(mzFexistFrame(id)==false)
{
alert('不存在选择项对应层');
return;
}else{
//当前选择FRAME
mzGetActiveFrame(id);
}
}

function mzGetTabCount()
{
return document.getElementsByTagName(tabTagName).length;
}

function mzGetActiveTab(id)
{
var lis    = document.getElementsByTagName(tabTagName);
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].id==id)
{
lis[k].className =activeClassName;
}else{
lis[k].className =hiddenClassNmae;
}
}
}

function mzGetActiveFrame(id)
{
var frames = document.getElementsByName(framesParentNodeId);
for(var i=0 ; i <frames.length; i++)
{
var fid = "f"+id;
if(frames[i].id==fid)
{
frames[i].style.display=disBlock;
}else{
frames[i].style.display=disHidden;
}
}
}

function mzFexistTab(id)
{
var obj = document.getElementById(id);
if(obj!=null)
{return true;}else{return false;}
}

function mzFexistFrame(id)
{
var obj = document.getElementById("f"+id);
if(obj!=null)
{return true;}else{return false;}
}

function mzDeleObj(id)
{
var tab=document.getElementById(id);
//获取上个兄弟节点
var lastTabId=tab.previousSibling.id;

      if(tab)
      {
      tab.parentNode.removeChild(tab);
      }
      var frame = document.getElementById("f"+id);
      if(frame)
      {
        frame.parentNode.removeChild(frame);
      }

      if(mzFexistActiveTab()==false)
      {
      mzFrameDis(lastTabId);
      }
}

//是否存在activeTab
function mzFexistActiveTab()
{
var lis    = document.getElementsByTagName(tabTagName);
var flag =0;
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].className==activeClassName)
{
flag=1;
}
}
if(flag>0)
{
return true;
}else{
return false;
}
}

//TAB滚动
function mzScroll(flag)
{
var tabDivLen=document.getElementById('tid').offsetWidth;
//alert(document.getElementById('tid').innerHTML);
var innerLen = document.getElementById('tid').innerHTML.length;
//alert(document.getElementById('tid').firstChild.scrollLeft);
document.getElementById('tid').firstChild.scrollLeft+=10;
if(innerLen>=100)
{
if(flag)
{
document.getElementById('tid').firstChild.scrollLeft+=10;
}else{
document.getElementById('tid').scrollLeft+=10;
}
}
}

var i=0;
function moveText(){

document.getElementById('tid').style.left = i;
i++;
//alert(document.getElementById('tid').clientWidth);
if(i > (parseInt(document.getElementById('tid').clientWidth)))i=1;
setTimeout("moveText()",10);
}

</script>
</head>

<body onload="moveText();" style="background-image:url(img/menu_border.gif); background-position:right; background-repeat:repeat-y;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0px;">
<tr >
    <td height="25" colspan="2" background="img/main_title_bg.gif" style="overflow:hidden;">
<div style="margin:0p; overflow:hidden; border:thin dotted 0px red; width:100%; height:100%;">
<div id="tabDiv" style="float:left; margin:0px; overflow:hidden; border:thin dotted 0px red; width:90%; height:100%;">
<ul id="tid" style="list-style:none; float:left; margin-left:5px; margin-bottom:-5px;">
      <li id="0" onClick="mzFrameDis('0');" class="tab_li_active"><span ><img style="vertical-align:top;" src="img/home.png"> 首页 </span></li>
    </ul>
</div>
</div>
</td>

</tr>

<tr >
    <td colspan="2" id="contents">
<iframe class="frameClass" name="content" id="f0" src="<%=request.getContextPath()%>/main/content.jsp" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>

仿 浏览器tab成效实现

仿浏览器tab成效实现