`
johncon
  • 浏览: 27813 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
文章分类
社区版块
存档分类
最新评论

TabControl : TabPanel

prototypeHTML数据结构Blog 
阅读更多

最近工作需要，写了一个小型的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下显示

 

 

效果图：

 

 

  • 大小: 13.7 KB
分享到：
Ext jsontree、xmltree
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    c# 在webFrom上实现tabcontrol功能（onmouseover事件，onclick事件）.zip

    2. 创建Tab页：每个Tab页对应一个`&lt;asp:TabPanel&gt;`，需要在TabControl中添加多个TabPanel，每个TabPanel有自己的`HeaderText`属性，用于显示在Tab标签上的文本，`ContentTemplate`则用于定义每个Tab页的内容。...

    Asp.net Accordion、DragPanel、Rating、 TabPanel Ajax控件的使用

    TabPanel是TabControl控件的一部分，用于创建多标签界面。每个TabPanel包含一个标题和内容区域。例如： ```asp &lt;ajaxToolkit:TabControl ID="TabControl1" runat="server"&gt; &lt;asp:TabPanel ID="TabPanel1" ...

    WPF菜单栏，工具栏，TabControl动态添加、删除（支持左右滑动，选择），标题栏可修改背景色

    在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中实现动态的菜单栏、工具栏、TabControl的添加和删除功能，同时提供标题栏背景色的自定义修改。WPF是.NET Framework的一个重要组成部分...

    .net中WebTabControl

    每个TabPanel代表一个标签页，可以通过HeaderText属性设置显示的标题，而内容则可以包含在TabPanel内部。 二、WebTabControl的特性 1. 动态加载：WebTabControl支持动态加载内容，只有当用户切换到某个标签页时，...

    TabControl asp.net的（vb）代码事例

    在ASP.NET开发中，TabControl是一种常用的用户界面组件，它允许在一个页面上展示多个视图，每个视图对应一个Tab页。在VB.NET编程环境中，TabControl的实现方式多种多样，但通常涉及HTML控件、服务器控件以及后台代码...

    wpf实现的一个好用的TabControl

    在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）来实现一个功能强大的TabControl控件。TabControl是WPF中的一个重要组件，它允许用户通过标签切换不同的内容区域，非常适合用于展示多个...

    WPF 自定义TabControl

    在C# WPF（Windows Presentation Foundation）开发中，TabControl是一个常用控件，用于展示分页式的用户界面。在默认情况下，TabControl会根据需要自动调整大小以显示所有的TabItems，但当TabItems数量过多时，可能...

    WPF漂亮的TabControl样式

    其中，`TabPanel`是放置所有TabItem的地方，而`ContentPresenter`则用于显示当前选中的TabItem内容。 - `TabControl.TabStripPlacement`属性可以改变TabItem的位置，例如可以设置为顶部、底部、左侧或右侧。 - `...

    WPF TabControl 有趣的样式

    - 使用`ControlTemplate`可以自定义控件的整体布局，包括`TabPanel`（放置`TabItem`的区域）和`ContentPresenter`（显示内容的区域）的位置和样式。 - 可以通过`HeaderTemplate`和`ContentTemplate`分别定制`...

    WPF如何自定义TabControl控件样式示例详解

    默认的TabControl标题是使用TabPanel容器包含的。要想实现TabControl标题头平均分布，需要把TabPanel替换成UniformGrid； 替换后的TabControl样式如下： &lt;Style x:Key="TabControlStyle" Ta

    Wpf TabControl Style

    `TabControl` 的模板包含 `TabPanel`（用于显示标签）和 `ContentPresenter`（用于显示内容）。以下是一个简单的模板示例： ```xml &lt;ControlTemplate TargetType="{x:Type TabControl}"&gt; &lt;TabPanel x:...

    C#重绘TabControl的Tabpage标签，添加图片及关闭按钮

    在C#编程中，TabControl控件是Windows Forms应用程序中常用的一种组件，用于展示多个相关的页面或窗体。本文将详细讲解如何通过重绘TabControl来实现Tabpage标签的自定义，包括添加图片和关闭按钮。 首先，为了实现...

    WPF tab宽度自适应 可关闭

    2. 自定义`TabControl`样式：通过自定义`TabControl`的样式，我们可以控制`TabPanel`的`HorizontalContentAlignment`属性，使其内容居中对齐。 ```xml &lt;Style TargetType="{x:Type TabControl}"&gt; ...

    asp.net TabControls 选项卡

    // 将TabPanel添加到TabControl tabControl.Tabs.Add(tabPage); } // 将TabControl添加到页面的ContentPlaceHolder PlaceHolder1.Controls.Add(tabControl); } } ``` 在这个例子中，我们首先检查是否是页面...

    WPF TAB页 竖向字体显示

    `TabPanel`是存放TabItem的地方，通常位于TabControl的顶部，但我们需要把它移到侧面或底部。 ```xml &lt;Style TargetType="TabControl"&gt; &lt;ControlTemplate TargetType="TabControl"&gt; *"/&gt; *...

    通过重新样式化WPF TabControl创建Outlook导航窗格

    在TabControl的例子中，我们需要修改默认的TabItem和TabPanel的样式，以便它们呈现出与Outlook导航窗格相似的外观。这包括改变背景颜色、字体样式、边框以及选中项的高亮效果。 1. **创建资源字典**：首先，我们...

    [A037]ASP.NET AJAX控件Tabs

    2. **配置TabPanels**：每个TabControl可以包含一个或多个TabPanels，通过设置TabPanel的`HeaderText`属性定义Tab标签的文本，设置`ContentTemplate`定义Tab内容。 3. **事件处理**：TabControl提供了丰富的事件，...

    TabStrip 示例

    例如，可以通过设置TabStrip的Skin属性改变其外观，使用TabPanel来创建新的标签页，设置PostBackUrl属性可实现点击标签后页面的无刷新跳转。 在WPF（Windows Presentation Foundation）中，TabControl是TabStrip的...

    extjs入门案例大全

    最后，EXTJS的TabControl组件允许用户在一个界面中切换多个视图： ```javascript Ext.onReady(function() { new Ext.TabPanel({ // ... }); }); ``` 虽然这个例子不完整，但通常TabPanel会包含多个Tab，每个Tab...

Magicbox
Global site tag (gtag.js) - Google Analytics