用js书写的一个简单的tab组件
说明：附件aa.rar是源代码。1 效果图
http://www.iteye.com/upload/attachment/54145/2ad7d3d1-3212-37be-b75e-5400861b65a4-thumb.jpg?1227860518
说明：
(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(){//创建TabHeandvar 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";elsediv1.style.height="20px";div1.style.top=this.headHeight+"px"this.tabClient=div1;this.targDiv.appendChild(div1);}//添加一个tab项目this.addItem=function(paraJson){//向表头添加标题信息之livar dd=eval("("+paraJson+")");var li=document.createElement("li");//向表头添加标题信息之alia=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"++"').className='';");eval ("document.getElementById(this.targName+'FSimpleTabTitle"++"').className='selectedtab';"); eval("document.getElementById(this.targName+'FSimpleTabs"++"').style.display='none';");eval("document.getElementById(this.targName+'FSimpleTabs"++"').style.display='';");thisObj.tID=ID;}} }
页:
[1]