当前位置： 代码迷 >> JavaScript >> 用js书写的一个简略的tab组件
  详细解决方案

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

热度：107   发布时间：2012-11-23 22:54:33.0
用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){
		//向表头添加标题信息之li

		var dd=eval("("+paraJson+")");
		var li=document.createElement("li");
		//向表头添加标题信息之a
		lia=document.createElement("a");
		this.targDiv.getAttribute("ID");
		lia.setAttribute("id",this.targName+"FSimpleTabTitle"+this.count);
		lia.setAttribute("idno",this.count);
		lia.setAttribute("href","#");
		lia.onclick=(function(v) {
	　　　  return function() { 
			   //调用FSimpleTab对象的ShowTabs方法
			   v.ShowTabs(v,this); //这里的this是事件源对象，是dom树中的一个节点  
		};
	　　}) (this);
		
	    lia.onmousemove=  (function(v) {
	　　　  return function() { 
			   //调用FSimpleTab对象的ShowTabs方法
			   v.ShowTabs(v,this); //这里的this是事件源对象，是dom树中的一个节点  
		};
	　　}) (this);

		lia.innerHTML=dd.title;
		li.appendChild(lia);
		this.tabHead.appendChild(li);

		//向显示区添加显示项目
		var div0=document.createElement("div");
		div0.setAttribute("id",this.targName+"FSimpleTabs"+this.count);
		div0.setAttribute("idno",""+this.count);
		div0.style.display="none";
		div0.innerHTML=dd.content;
		this.tabClient.appendChild(div0);
		this.count=this.count+1;
	}

	 //内部方法，显示选中的项目
	this.ShowTabs=function(thisObj,e){
	
		var ID=e.getAttribute("idno");
		if(ID!=thisObj.tID){	
        eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[thisObj.tID]+"').className='';");
		eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[ID]+"').className='selectedtab';");
	    eval("document.getElementById(this.targName+'FSimpleTabs"+[thisObj.tID]+"').style.display='none';");
		eval("document.getElementById(this.targName+'FSimpleTabs"+[ID]+"').style.display='';");
		thisObj.tID=ID;
		}

	}	


 }

1 楼 ake87 2008-12-01  
<p>我写类似这种代码的时候</p>
<p>常常是大量使用innerHTML来构造HTML代码</p>
<p>像这样的tab类</p>
<p>要是使用innerHTML可以写的很短，大大减少了代码量</p>
<p>而且我也有点习惯了这种简单的方式</p>
<p>?</p>
<p>想问问,使用innerHTML这样直接构造代码会有什么不好的地方没有？</p>
2 楼 fnet 2008-12-01  
我更喜欢使用构造函数+JSON方式来构造对象

function xxxx(xx) {
   this.xx = xx
}

xxxx.prototype = {
   method1 : function() {

   } ,
   ...
}


3 楼 yunhaifeiwu 2008-12-01  
<div class='quote_title'>ake87 写道</div>
<div class='quote_div'>
<p>我写类似这种代码的时候</p>
<p>常常是大量使用innerHTML来构造HTML代码</p>
<p>像这样的tab类</p>
<p>要是使用innerHTML可以写的很短，大大减少了代码量</p>
<p>
&lt;script src="/javascripts/tinymce/plugins/javaeye/langs/zh.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="/javascripts/tinymce/themes/advanced/langs/zh.js" type="text/javascript"&gt;&lt;/script&gt;
而且我也有点习惯了这种简单的方式</p>
<p>?</p>
<p>想问问,使用innerHTML这样直接构造代码会有什么不好的地方没有？</p>
</div>
<p>INNERHTML很好，很不错！以后会尽量用innerHTML</p>
<p>?</p>
<p>这个简单例子，会保留这种方式，有些特珠情况下，如仅修改css样式中某个属性值，</p>
<p>有innerHTML就不太划算。</p>
<p>?</p>
<p>当然，如果要实用，尽可能的用innerHTML。感谢兄台回复与说明！</p>
4 楼 yunhaifeiwu 2008-12-01  
fnet 写道
我更喜欢使用构造函数+JSON方式来构造对象

function xxxx(xx) {
   this.xx = xx
}

xxxx.prototype = {
   method1 : function() {

   } ,
   ...
}




json与interhtml缩短了代码量，我也喜欢！

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.