用js书写的一个简略的tab组件-JavaSript-爱易网页

用js书写的一个简略的tab组件

日期：2014-05-16　浏览次数：20415 次

用js书写的一个简单的tab组件
说明：附件aa.rar是源代码。

1 效果图

说明：
(1) 当点上面的标签，或鼠标移动到标签上面，下面的灰色框将显示对应的内容。
dddd-----对应着 xxxx; eeee对应着yyyy
(2) 各个标签可以动态添加

(3)该组件名为 FSimpleTab

2 组件应用代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<link href="ss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="FSimpleTab.js"></script>
</head>

<body> 

<!--组件将在id为xxx的div下显示-->
<div id="xxx" style="position: absolute;border: 1px solid #ccc;top:80px;left:10px"></div>
 
<script language=Javascript>
    
    var pa="{'width':200,'height':100,'headHeight':20,'targDiv':'xxx'}";
	//定义一个FSimpleTab组件，其参数是json格式-->
	var s=new FSimpleTab(pa);
	
	s.init();//初始化
	//加入标签内容
	s.addItem("{'title':'dddd','content':'xxxx'}")
	s.addItem("{'title':'eeee','content':'yyyy'}");
</script>
</body>
</html>

3 ss.css代码

@charset "utf-8";
 
.FSimpleTabBox{/*组件所占区域的外观，许多会被覆盖*/
	width: 746px;
	border: 1px solid #ccc;
	background: #fff;
	position: absolute;
	height:80px;
	left: 272px;
	top: 36px;
}

.FSimpleTabClient {/* 标签显示区域外观*/
    width:auto;
	    left:0px;
	background:#ddd;
	color:#f00;
}


.FSimpleTab{/*标签所在的整体区域外观
设定项目列表Ul元素的属性，其中background
 用来设定连贯于各个列表项目下的横线，否则它们会彼此分离，
 用了一张事先准备好的图片，让它放置在底部，水平重复*/
	height: 20px;
	margin: 0;
	padding-left: 0px;
	padding-right: 0px;
	width:100%;
	background: 
	      url('http://tech.tom.com/images/computer/2004/02/12/bottom.gif')
		repeat-x bottom;
}

.FSimpleTab li{/*各个标签背后的外观，设这一层目的是为了方便以后均分
标签所在的整体区域。
设定各个列表项目的属性，display属性设
定取消项目间的分行，list-style-type设定取消列表项目前的符号*/
	margin: 0 auto; 
	display: inline;
	list-style-type: none;
	position: relative;
    
	display:inline;
	float:left;

}

.FSimpleTab a:link, .FSimpleTab a:visited{/* 这是是展现出来的标签外观。
设定标签卡中超链接的文字的属性*/
	float: left;
	background: #f3f3f3;
	font-size: 12px;
	line-height: 14px;
	font-weight: bold;
	padding:2px 20px 2px 20px;
	margin-right: 4px;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #666;	
	 
}



.FSimpleTab a:link.selectedtab, .FSimpleTab a:visited.selectedtab{
	/*设定当前被选中的标签卡中超链接的属性*/
	border-bottom: 1px solid #fff;
	background: #fff;
	color:#00F;
}

.FSimpleTab a:hover{/*设定超链接鼠标浮动效果*/
	background: #fff;
}

4 FSimpleTab.js代码

function FSimpleTab(paraJson ){　　//构造方法,也定义了一个类
	//定义属性,
	var dd=eval("("+paraJson+")");
	this.width= dd.width;
	this.height=dd.height;

this.targDiv=document.getElementById(dd.targDiv);
	this.targName=this.targDiv.getAttribute("id");
	this.tabHead=null;
	this.tabClient=null;


	this.headHeight=20;
	if (dd.headHeight !=null ){
		this.headHeight=dd.headHeight;
	}
	this.tID=0;
	this.count=0;//保存tabItem个数
	this.targDiv.style.width=this.width+"px";
	this.targDiv.style.height=this.height+"px";

	//方法定义
	//初始方法
	this.init=function(){

		//创建TabHeand
		var div0=document.createElement("ul");
	    div0.setAttribute("id",this.targName+"FSimpleTab");
		div0.className="FSimpleTab";
		div0.style.height=this.headHeight+"px";
		this.tabHead=div0;
		this.targDiv.appendChild(div0);

		//创建Tab显示区域
		var div1=document.createElement("div");
		div1.setAttribute("id",this.targName+"FSimpleTabClient");
		div1.className="FSimpleTabClient";
		var h=this.targDiv.clientHeight-this.headHeight;
		if (h>0 )		div1.style.height=h+"px";
		else  div1.style.height="20px";

		div1.style.top=this.headHeight+"px"
		this.tabClient=div1;
		this.targDiv.appendChild(div1);

	}

	//添加一个tab项目
	this.addItem=function(paraJson){

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用js书写的一个简略的tab组件

相关资料更多>

推荐阅读更多>