开发中的用到tab的js(自己看的)

var tabview = {

  textPadding : 3, // Padding at the left of tab text - bigger value gives you wider tabs
  strictDocType : true,
  tabView_maxNumberOfTabs : 6, // Maximum number of tabs
 
 /* Don't change anything below here */
  dhtmlgoodies_tabObj : new Array(),
  activeTabIndex : new Array(),
  MSIE : navigator.userAgent.toLowerCase().indexOf('msie')>=0?true:false,
 
 // regExp : new RegExp(".*MSIE ([0-9]\.[0-9]).*","g"),
 // navigatorVersion : navigator.userAgent.replace(regExp,'$1'),
 
  ajaxObjects : new Array(),
  tabView_countTabs : new Array(),
  tabViewHeight : new Array(),
  tabDivCounter : 0,
  closeImageHeight : 8, // Pixel height of close buttons
  closeImageWidth : 8, // Pixel height of close buttons
 
 
 setPadding : function(obj,padding){
  var span = obj.getElementsByTagName('SPAN')[0];
  span.style.paddingLeft = padding + 'px'; 
  span.style.paddingRight = padding + 'px'; 
 },
 
 /**
   *展示TAB页，确定哪个显示为当前的TAB页
   *@parentId：父DIV的ID
   *@tabIndex: 展示的TAB为第几个
   **/
 
 showTab : function(parentId,tabIndex)
 {
  var parentId_div = parentId + "_";
  if(!document.getElementById('tabView' + parentId_div + tabIndex)){
   return;
  }
  if(this.activeTabIndex[parentId]>=0){
   if(this.activeTabIndex[parentId]==tabIndex){
    return;
   }
 
   var obj = document.getElementById('tabTab'+parentId_div + this.activeTabIndex[parentId]);
   
   obj.className='tabInactive';
   var img = obj.getElementsByTagName('IMG')[0];
   if(img.src.indexOf('tab_')==-1)img = obj.getElementsByTagName('IMG')[1];
   img.src = 'image/tab_right_inactive.gif';
   document.getElementById('tabView' + parentId_div + this.activeTabIndex[parentId]).style.display='none';
  }
  
  var thisObj = document.getElementById('tabTab'+ parentId_div +tabIndex); 
   
  thisObj.className='tabActive';
  var img = thisObj.getElementsByTagName('IMG')[0];
  if(img.src.indexOf('tab_')==-1)img = thisObj.getElementsByTagName('IMG')[1];
  img.src = 'image/tab_right_active.gif';
  
  document.getElementById('tabView' + parentId_div + tabIndex).style.display='block';
  this.activeTabIndex[parentId] = tabIndex;
  

  var parentObj = thisObj.parentNode;
  var aTab = parentObj.getElementsByTagName('DIV')[0];
  countObjects = 0;
  var startPos = 2;
  var previousObjectActive = false;
  while(aTab){
   if(aTab.tagName=='DIV'){
    if(previousObjectActive){
     previousObjectActive = false;
     startPos-=2;
    }
    if(aTab==thisObj){
     startPos-=2;
     previousObjectActive=true;
     this.setPadding(aTab,this.textPadding+1);
    }else{
     this.setPadding(aTab,this.textPadding);
    }
    
    aTab.style.left = startPos + 'px';
    countObjects++;
    startPos+=2;
   }   
   aTab = aTab.nextSibling;
  } 
  return;
 },
 /**
   *点击TAB标签，显示该TAB页
   *
   *
   **/
 tabClick : function()
 {
  var idArray = this.id.split('_');  
  try{
  tabview.showTab((this).parentNode.parentNode.id,idArray[idArray.length-1].replace(/[^0-9]/gi,''));
  }catch(e){}
 },
 
 rolloverTab : function()
 {
  if(this.className.indexOf('tabInactive')>=0){
   this.className='inactiveTabOver';
   var img = this.getElementsByTagName('IMG')[0];
   if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1];
   img.src = 'image/tab_right_over.gif';
  }
  
 },
 rolloutTab : function()
 {
  if(this.className ==  'inactiveTabOver'){
   this.className='tabInactive';
   var img = this.getElementsByTagName('IMG')[0];
   if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1];
   img.src = 'image/tab_right_inactive.gif';
  }
  
 },
 
 hoverTabViewCloseButton : function()
 {
  this.src = this.src.replace('close.gif','close_over.gif');
 },
 
 stopHoverTabViewCloseButton : function()
 {
  this.src = this.src.replace('close_over.gif','close.gif');
 },
 /**
   *初始化TAB标签
   *
   **/
 initTabs : function(mainContainerID,tabTitles,activeTab,width,height,closeButtonArray,additionalTab)
 {
  if(!closeButtonArray)closeButtonArray = new Array();
  if(!additionalTab || additionalTab=='undefined'){   
   this.dhtmlgoodies_tabObj[mainContainerID] = document.getElementById(mainContainerID);
   width = width + '';
   if(width.indexOf('%')<0)width= width + 'px';
   this.dhtmlgoodies_tabObj[mainContainerID].style.width = width;
      
   height = height + '';
   if(height.length>0){
    if(height.indexOf('%')<0)height= height + 'px';
    //this.dhtmlgoodies_tabObj[mainContainerID].style.height = "auto !important";
    //this.dhtmlgoodies_tabObj[mainContainerID].style.height = height;
    this.dhtmlgoodies_tabObj[mainContainerID].style.minHeight = height;
   }
   

   this.tabViewHeight[mainContainerID] = height;
   
   var tabDiv = document.createElement('DIV');  
   var firstDiv = this.dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0]; 
   
   this.dhtmlgoodies_tabObj[mainContainerID].insertBefore(tabDiv,firstDiv); 
   tabDiv.className = 'dhtmlgoodies_tabPane';   
   this.tabView_countTabs[mainContainerID] = 0;

  }else{
   var tabDiv = this.dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0];
   var firstDiv = this.dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[1];
   height = this.tabViewHeight[mainContainerID];
   activeTab = this.tabView_countTabs[mainContainerID];  
 
   
  }
  
  
  
  for(var no=0;no<tabTitles.length;no++){
   var aTab = document.createElement('DIV');
   aTab.id = 'tabTab' + mainContainerID + "_" +  (no + this.tabView_countTabs[mainContainerID]);
   aTab.onmouseover = this.rolloverTab;
   aTab.onmouseout = this.rolloutTab;
   aTab.onclick = this.tabClick;
   aTab.className='tabInactive';
   tabDiv.appendChild(aTab);
   var span = document.createElement('SPAN');
   span.innerHTML = tabTitles[no];
   span.style.position = 'relative';
   aTab.appendChild(span);
   
   if(closeButtonArray[no]){
    var closeButton = document.createElement('IMG');
    closeButton.src = 'image/close.gif';
    closeButton.height = this.closeImageHeight + 'px';
    closeButton.width = this.closeImageHeight + 'px';
    closeButton.setAttribute('height',this.closeImageHeight);
    closeButton.setAttribute('width',this.closeImageHeight);
    closeButton.style.position='absolute';
    closeButton.style.top = '6px';
    closeButton.style.right = '0px';
    closeButton.onmouseover = this.hoverTabViewCloseButton;
    closeButton.onmouseout = this.stopHoverTabViewCloseButton;
    
    span.innerHTML = span.innerHTML + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'; 
    
    var deleteTxt = span.innerHTML+'';

    closeButton.onclick = function(){
     var needid = this.parentNode.parentNode.id;
     var parentid = this.parentNode.parentNode.parentNode.parentNode.id;
     var idArray = needid.split('_');
     var idArray = this.parentNode.parentNode.id.split('_'); 
     tabview.showTab($(this.parentNode.parentNode.id).parentNode.parentNode.id,idArray[idArray.length-1].replace(/[^0-9]/gi,''));
     tabview.closebuttondeleteTab(idArray[idArray.length-1].replace(/[^0-9]/gi,''),parentid);};
    span.appendChild(closeButton);
   }
   
   var img = document.createElement('IMG');
   img.valign = 'bottom';
   img.src = 'image/tab_right_inactive.gif';
   // IE5.X FIX
   //if((navigatorVersion && navigatorVersion<6) || (MSIE && !strictDocType)){
   // img.style.styleFloat = 'none';
   // img.style.position = 'relative'; 
   // img.style.top = '4px'
   // span.style.paddingTop = '4px';
   // aTab.style.cursor = 'hand';
   //} // End IE5.x FIX
   aTab.appendChild(img);
  }

  var tabs = this.dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV');
  var divCounter = 0;
  for(var no=0;no<tabs.length;no++){
   if(tabs[no].className=='dhtmlgoodies_aTab' && tabs[no].parentNode.id == mainContainerID){
    //if(height.length>0)tabs[no].style.height = height;
    if(height.length>0){
     tabs[no].style.minHeight = height;
    }
    tabs[no].style.display='none';
    tabs[no].id = 'tabView' + mainContainerID + "_" + divCounter;
    divCounter++;
   }   
  } 
  this.tabView_countTabs[mainContainerID] = this.tabView_countTabs[mainContainerID] + tabTitles.length; 
  this.showTab(mainContainerID,activeTab);

  return activeTab;
 },
 

 resetTabIds : function(parentId)
 {
  var tabTitleCounter = 0;
  var tabContentCounter = 0;
  
  
  var divs = this.dhtmlgoodies_tabObj[parentId].getElementsByTagName('DIV');

  
  for(var no=0;no<divs.length;no++){
   if(divs[no].className=='dhtmlgoodies_aTab'){
    divs[no].id = 'tabView' + parentId + '_' + tabTitleCounter;
    tabTitleCounter++;
   }
   if(divs[no].id.indexOf('tabTab')>=0){
    divs[no].id = 'tabTab' + parentId + '_' + tabContentCounter; 
    tabContentCounter++;
   } 
   
    
  }
 
  this.tabView_countTabs[parentId] = tabContentCounter;
 },
 
 createNewTabSel : function (parentId,tabTitle,tabContent,tabContentUrl,closeButton,tag){
  var num = this.checkCheckbox('checkbox32');
  var arrary = num.split(":"); 
  alert(arrary);     
  if(num == 'not select'){
         alert('not select!');
  }
  else if(arrary.length==2){
       if (tag=='1'||tag=='3'){
          var selId = arrary[0].replace(/,/g,"");
          tabContentUrl = tabContentUrl + '?id=' + selId;
          alert("&&&");
          this.createNewTab(parentId,tabTitle,tabContent,tabContentUrl,closeButton);
         }else
             this.createNewTab(parentId,tabTitle,tabContent,tabContentUrl,closeButton);
  }else if(arrary.length>2){
         alert('more!!!');
     }   
 },
 
 createNewTab : function (parentId,tabTitle,tabContent,tabContentUrl,closeButton)
 {
    
      if(this.tabView_countTabs[parentId]>=this.tabView_maxNumberOfTabs)return; // Maximum number of tabs reached - return
      var div = document.createElement('DIV');
 
      div.className = 'dhtmlgoodies_aTab';
      this.dhtmlgoodies_tabObj[parentId].appendChild(div);  

      var tabId = this.initTabs(parentId,Array(tabTitle),0,'','',Array(closeButton),true);
      //if(tabContent)div.innerHTML = tabContent;
      if(tabContentUrl){
      pf.loadPage(tabContentUrl,div.id);  
      }
 },

 getNewTab : function (parentId,tabTitle,tabContent,closeButton,selId)
 {
    
      if(this.tabView_countTabs[parentId]>=this.tabView_maxNumberOfTabs)return; // Maximum number of tabs reached - return
      var div = document.createElement('DIV');
 
      div.className = 'dhtmlgoodies_aTab';
      this.dhtmlgoodies_tabObj[parentId].appendChild(div);  

      var tabId = this.initTabs(parentId,Array(tabTitle),0,'','',Array(closeButton),true);
      if(tabContent)div.innerHTML = tabContent;
      return div.id;
 },  
 
 /**
   *删除TAB页
   *
   **/
 deleteTab : function(tabIndex,parentId)
 { 
      var tabIndex = this.activeTabIndex[parentId];
   if(document.getElementById('tabTab' + parentId + '_' + tabIndex)){
    var obj = document.getElementById('tabTab' + parentId + '_' + tabIndex);
    var id = obj.parentNode.parentNode.id;
    obj.parentNode.removeChild(obj);
    var obj2 = document.getElementById('tabView' + parentId + '_' + tabIndex);
    obj2.parentNode.removeChild(obj2);
    this.resetTabIds(parentId);
    this.activeTabIndex[parentId]=-1;
    this.showTab(parentId,'0');
   }   
   
 },

 closebuttondeleteTab : function(tabIndex,parentId)
 {

   if(document.getElementById('tabTab' + parentId + '_' + tabIndex)){
    var obj = document.getElementById('tabTab' + parentId + '_' + tabIndex);
    var id = obj.parentNode.parentNode.id;
    obj.parentNode.removeChild(obj);
    var obj2 = document.getElementById('tabView' + parentId + '_' + tabIndex);
    obj2.parentNode.removeChild(obj2);
    this.resetTabIds(parentId);
    this.activeTabIndex[parentId]=-1;
    this.showTab(parentId,'0');
   }   
  
 },

 /*
 *checkbox  判断checkbox选择，可单选，多选并返回所选项的ID数组
 *
 *@param objNam  checkbox name
 */
 checkCheckbox : function (objNam){
 
    var obj = document.getElementsByName(objNam);
    var objLen= obj.length;   
    var objN=0;   //
    var nameValue='';
    var value = '';
    var i;
    for (i = 0;i< objLen;i++){
      if (obj [i].checked==true) {
       objN++;
       value = obj[i].value;
       nameValue = nameValue + value +':';
      }
    }
    if(objN==1)
        return value + ':' + 'one';
    else if(objN==0)
        return 'not select';
    else if(objN>1)
        return nameValue + 'more';
 }

};

 

下面是获得他的div的id两种方法，虽然第一个方法复杂，但是可以很好研究了tab的js

//增加新的考评选项
 //urlstr:要处理的URL地址
  addAppraisalModel:function(urlstr){
  
  //打开一个新的tab。其父节点是一个id为'appraisalList'的DIV，
  tabview.createNewTab('appraisalList',appraisalResource.tabModelName0,'',urlstr,true);
 //获得父DIV节点
  var pdiv = document.getElementById('appraisalList');
    //获得父节点的最后一个孩子，就是最新打开的tab。  
  var lastDivNode = pdiv.lastChild;
    //我在主页面放了一个隐藏的<input>，用来存放最新打开的tab DIV的id。以便以后对此DIV进行刷新  
  var hiddenIndex = document.getElementById("tabIndex");
   if(hiddenIndex != null){
    hiddenIndex.value = lastDivNode.id;
   }
 },

 

第二种方法，比较简单。就是把要加载的页面放到指定的div中。这样div的id就可以我们自己来指定了。不用在动态的获得了

评论

1 楼 sackie 2009-01-01  

学习中