TabControl : TabPanel

最近工作需要，写了一个小型的Tab组件　TabControl

还在不断的强化功能和优化

 

//TabControl 1.0RC
///*********************************** tabConfig ************************************************///

var tabConfig = {
	imagePath : "images/default/",
	defaultTabImage : "images/default/tabBg.gif",
	activeTabImage : "images/default/activeTabBg.gif",
	fontSize : "13",
	bgColor : "#E0E2E2",
	fontColor : "#000000",
	borderColor : "#52534D",
	selectBGColor : "#343432",
	selectFontColor : "#ffffff",
	selectBorderColor : "#ffffff",
	tabWidth : 500,
	tabHeight : 400,
	titleWidth : 77,
	titleHeight : 19,
	//设置图片路径
	setImagePath: function(path){
		if(path == null) path = "images/";
		if(path.charAt(path.length-1) != '/') path += "/";
		/*this.defaultCloseIcon = path + '/tabclose.gif',
		this.defaultLeftIcon = path + "left.gif";
		this.defaultRightIcon = path + 'right.gif';*/
		this.defaultTabImage =  path + 'tabBg.gif';
		this.activeTabImage = path + 'activeTabBg.gif';
		var imagee = document.createElement("image");
		imagee.src = this.defaultTabImage;
		this.titleWidth = imagee.width;
		this.titleHeight = imagee.height;
	}
}

///*********************************** TabControl ************************************************///

//TabPanel
function TabControl(tabPanels) {
	this.getName = function() {
		var i = 0;
		var baseName = "TabControl";
		var result = null;
		while(true) {
			var id = baseName+i.toString();
			result = document.getElementById(id);
			if(!result)	return id;
		}
	}
	this.TabPanels = tabPanels;
	this.currentPanel = null;
	this.name = this.getName();
	this.body = null;//tabPanel的内容

	this.onPanelChange = null;//tabPanel变换事件
	this.tabControlHTMLObj = null;//tabControl
	this.titleTable = null;//title标题table
	this.titleTR = null;//titles值
	this.init();
}

//展现TabControl的HTML
TabControl.prototype.display = function(parentNode){
	if(!parentNode){
		parentNode = document.body;
	}
	parentNode.appendChild(this.tabControlHTMLObj);
}

//TabPanel初始化
TabControl.prototype.init = function() {
	var len = this.TabPanels.length;
	if(len == 0)	return;
	var topDiv = document.createElement("div");
	topDiv.id = this.name;
				
	//******************构造头部Title标题**************************
	this.titleTable = document.createElement("table");
	var headBody = document.createElement("tbody");
	this.titleTable.appendChild(headBody);
	this.titleTable.cellSpacing = 0;
	this.titleTable.cellPadding = 0;
	this.titleTable.style.color = tabConfig.fontColor;
	this.titleTable.style.fontSize = tabConfig.fontSize+"px";
	this.titleTable.style.wordWrap = "break-word";
	var headTr = document.createElement("tr");
	headTr.style.width = tabConfig.titleWidth;
	headTr.style.height = tabConfig.titleHeight;
	headBody.appendChild(headTr);
	//循环增加TabPanel的标题TD
	for(var i = 0; i < len; i++) {
		this.TabPanels[i].parent = this;
		var td = this.createTitle(i,this.TabPanels[i].name);
		headTr.appendChild(td);
	}
	this.titleTR = headTr;
	topDiv.appendChild(this.titleTable);
	this.tabControlHTMLObj = topDiv;
	//***********构造TabControl的BODY 即TabPanel的内容部分******************
	var bodyDiv = document.createElement("div");
	bodyDiv.style.borderTop = "1px solid " + tabConfig.borderColor;
	bodyDiv.style.borderLeft = "1px solid " + tabConfig.borderColor;
	bodyDiv.style.borderBottom = "1px solid " + tabConfig.borderColor;
	bodyDiv.style.borderRight = "1px solid " + tabConfig.borderColor;
	bodyDiv.style.width = "100%"
	bodyDiv.style.height = (tabConfig.tabHeight - this.titleTable.offsetHeight)+"px";
	bodyDiv.style.fontSize = tabConfig.fontSize + "px";
	bodyDiv.style.wordWrap = "break-word";
	bodyDiv.style.overflow = "auto";
	bodyDiv.style.paddingTop = "10px";
	topDiv.appendChild(bodyDiv);
	this.body = bodyDiv;
	this.panelChange(this.TabPanels[0],true);	//设置第一页为当前页
}

//toString的方法使得title的onclick事件无效
TabControl.prototype.toString = function(){
	if(this.tabControlHTMLObj){
		return this.tabControlHTMLObj.outerHTML;
	}
}

//调整tabControl的宽度：包括tabPanel的宽度
TabControl.prototype.setWidth = function(newWidth) {
	this.tabControlHTMLObj.style.width = newWidth;
}

//index处增加TabPanel
TabControl.prototype.addPanel = function(index, TabPanel) {
	if(index < 0){
		index = 0;
	}
	if(index >= this.TabPanels.length){
		index = this.TabPanels.length - 1;
	}
	if(TabPanel) {
		this.TabPanels[this.TabPanels.length] = TabPanel;
		TabPanel.parent = this;
		var td = this.createTitle(this.TabPanels.length - 1);
		this.titleTR.appendChild(td);
	}
}

//追加TabPanel
TabControl.prototype.appendPanel = function(TabPanel){
	if(TabPanel){
		this.TabPanels[this.TabPanels.length] = TabPanel;
		TabPanel.parent = this;
		var td = this.createTitle(this.TabPanels.length - 1);
		this.titleTR.appendChild(td);
	}
}

//页面改变事件,isFirst指的是:是否是系统调用,即第一次调用
TabControl.prototype.panelChange = function(selectPanel,isSystem) {
	if(!isSystem) {
		if(this.onPanelChange!=null) {
			//如果返回false,则不进行任何操作
			if((this.onPanelChange(this,selectPanel)) == false)	return;
		}
	}
	if(selectPanel.tabPanelTitle == null)	return;
	if(this.currentPanel != null && this.currentPanel.tabPanelTitle != null) {
		//this.currentPanel.content = this.body.innerHTML;	//保存现有的状态 -- 暂不保存
		this.currentPanel.tabPanelTitle.style.backgroundImage = "url(" + tabConfig.defaultTabImage + ")";
	}
	this.currentPanel = selectPanel;
	selectPanel.tabPanelTitle.style.backgroundImage = "url(" + tabConfig.activeTabImage + ")";
	this.body.innerHTML = selectPanel.content;
}

//移除TabControl对象
TabControl.prototype.destroy = function() {
	document.body.removeChild(this.tabControlHTMLObj);
}

TabControl.prototype.removePanel = function(index) {
	try {
		this.TabPanels[index].destroy();
	}catch (e) {
	}
}

TabControl.prototype.createTitle = function (tabIndex,pName){
	var td = document.createElement("td");
	td.vAlign = "middle";
	td.width = tabConfig.titleWidth;
	td.height = tabConfig.titleHeight;
	td.style.backgroundImage = "url(" + tabConfig.defaultTabImage + ")";
	td.style.cursor = "hand";
	td.dataObj = this.TabPanels[tabIndex];
	td.innerHTML += "
 "+this.TabPanels[tabIndex].title+" ";
	this.TabPanels[tabIndex].tabPanelTitle = td;
	td.onclick = function() {
		if(this.dataObj.parent.currentPanel == this.dataObj){
			return;
		}
		this.dataObj.parent.panelChange(this.dataObj);
	}
	return td;
}


///*********************************** TabPanel ************************************************///

function TabPanel(params) {
	this.getName = function() {
		var i = 0;
		var baseName = "TabPanel";
		var result = null;
		/*while(true) {
			var id = baseName+i.toString();
			result = document.getElementById(id);
			if(!result)	return id;
		}*/
	}
	this.name = this.getName();
	this.title = (params.title) ? params.title : "";
	this.parent = null;
	this.tabPanelTitle = null;
	var iframeSrc;
	if(params){
		var str = new StringBuffer();
		str.append('');
			str.append('');
				str.append('
');
					str.append('