TabControl : TabPanel

最新推荐文章于 2023-11-03 12:06:35 发布

最新推荐文章于 2023-11-03 12:06:35 发布 · 406 阅读

文章标签：

#prototype #HTML #数据结构 #Blog

本文介绍了一个自定义的TabControl组件，该组件可用于实现多个面板的切换展示。文章详细展示了TabControl及TabPanel类的设计与实现，包括HTML结构生成、样式配置、事件处理等。

最近工作需要，写了一个小型的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 += "<nobr><div> "+this.TabPanels[tabIndex].title+" </div></nobr>";
	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('<table width = "100%" height = "95%" border = "0" cellspacing = "1" cellpadding = "1" align = "center">');
			str.append('<tr>');
				str.append('<td valign = "top">');
					str.append('<iframe id = "tabpanel" width = "100%" height = "100%" frameborder = "0" type = "text/html" src = "'+params.src+'" scrolling="No" />');
				str.append('</td>');
			str.append('</tr>');
		str.append('</table>');
		iframeSrc = str.toString();
	}
	this.content = iframeSrc;
}

//移除TabPanel：移除TD，并重新激活第一个TabPanel
TabPanel.prototype.destroy = function() {
	if(this.tabPanelTitle != null) {
		//移除数据结构
		this.tabPanelTitle.parentNode.removeChild(this.tabPanelTitle);
		this.tabPanelTitle = null;
		var arr = this.parent.TabPanels;
		//删除TabPanels中的指定元素
		for(var i = 0; i < arr.length; i++) {
			if(arr[i] == this){
				//删除不添加元素
				this.parent.TabPanels.splice(i,1);
			}
		}
		//激活第一个TabPanel
		if(this.parent.TabPanels.length != 0){
			this.parent.panelChange(this.parent.TabPanels[0],true);
		}
	}
}

/*************** StringBuffer ***********************/

function StringBuffer() {
	this._str = []; 
	if(arguments.length==1) {
		this._str.push(arguments[0]);    
	} 
} 

StringBuffer.prototype.append = function(str) {
	this._str.push(str);    
	return this;    
} 

StringBuffer.prototype.toString = function() {
	return this._str.join("");    
} 

/* 返回长度 */   
StringBuffer.prototype.length = function() {
	var str = this._str.join("");    
	return str.length;    
}

使用eg:

var n1 = new TabPanel({title : "标题一", src : "a1.html",name:"n1"});
var n2 = new TabPanel({title : "标题二", src : "http://ice-cream.iteye.com/blog/172306",name:"n2"});
var n3 = new TabPanel({title : "标题三", src : "a3.html",name:"n3"});
var n4 = new TabPanel({title : "标题e", src : "a4.html",name:"n4"});

var tabPanels = [n1, n2, n3, n4];
var m = new TabControl(tabPanels);

m.display(document.getElementById("tabpanel"));//在id为tabpanel下显示
//or
//m.display();//在body下显示

效果图：