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 + ' ';
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就可以我们自己来指定了。不用在动态的获得了
