WEB开发网
开发学院网页设计JavaScript CSS+JavaScript 实现TabPane页签 阅读

CSS+JavaScript 实现TabPane页签

 2010-09-14 13:37:10 来源:WEB开发网   
核心提示: tabPane.jsvarTabPaneConfig={idPrefix:"tab-panel-object-",idCounter:0,getId:function(){returnthis.idPrefix+this.idCounter++;},tabHeadId:

tabPane.js

varTabPaneConfig={
  idPrefix:"tab-panel-object-",
  idCounter:0,
  getId:function(){returnthis.idPrefix+this.idCounter++;},
  tabHeadId:"tabHead",
  tabHeadClass:"tab-headtab-border",
  tabBodyId:"tabBody",
  tabBodyClass:"tab-border"
}
functionTabPane(id){
  this.id=id;
  this.height="100%";
  this.width="100%";
  this.tabPages=0;
  this.head=null;
  this.body=null;  
}
TabPane.prototype.init=function(){  
  varr=document.getElementById(this.id);
  if(!r.style.overflow)  r.style.overflow="auto";
  r.className="tab";
  //createhead
  vardiv=document.createElement("div");
  div.id=TabPaneConfig.tabHeadId;
  div.className=TabPaneConfig.tabHeadClass;
  r.appendChild(div);
  this.head=div;
  varul=document.createElement("ul");
  div.appendChild(ul);
  //createbody
  div=document.createElement("div");
  div.id=TabPaneConfig.tabBodyId;
  div.className=TabPaneConfig.tabBodyClass;
  r.appendChild(div);  
  this.body=div;
}
TabPane.prototype.addTabPage=function(obj){
  if(!document.getElementById(obj.panel))return;
  if(!this.tabPages) this.init();  
  this.head.firstChild.appendChild(this.createTabTitle(obj));
  this.body.appendChild(document.getElementById(obj.panel));  
  this.tabPages++;
}
TabPane.prototype.createTabTitle=function(obj){
  varli=document.createElement("li");
  li.id=TabPaneConfig.getId();  
  li.data=obj.panel;
  li.onclick=tabOnClick;
  li.style.width=obj.width;
  if(this.tabPages){
    li.className="";
    document.getElementById(obj.panel).style.display="none";  
  }else{
    li.className="hover";
    document.getElementById(obj.panel).style.display="block";  
  }
  vartextNode=document.createTextNode(obj.title);
  li.appendChild(textNode);
  returnli;
}
functiontabOnClick(){  
 varevent=window.event||arguments[0];
 varelement=event.srcElement||event.target; 
  varliArr=element.parentNode.getElementsByTagName("li");
  for(vari=0;i<liArr.length;i++){
    liArr[i].className="";
    document.getElementById(liArr[i].data).style.display="none";
  }
  element.className="hover";  
  document.getElementById(element.data).style.display="block";
}

上一页  1 2 3 4 

Tags:CSS JavaScript 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接