开发JavaScript组件完整示例代码分享

来源：动视网责编：小采时间：2020-11-27 20:23:56

开发JavaScript组件完整示例代码分享

开发JavaScript组件完整示例代码分享:使用JavaScript，按照面向对象的思想来构建组件。现以构建一个TAB组件为例。从功能上讲，组件包括可视部分和逻辑控制部分；从代码结构上讲，组件包括代码部分和资源部分（样式、图片等）。组件的特点：高内聚，低耦合（不与其他代码逻辑交叉，可以继承，包含

推荐度：

点击下载本文 文档为doc格式

导读开发JavaScript组件完整示例代码分享:使用JavaScript，按照面向对象的思想来构建组件。现以构建一个TAB组件为例。从功能上讲，组件包括可视部分和逻辑控制部分；从代码结构上讲，组件包括代码部分和资源部分（样式、图片等）。组件的特点：高内聚，低耦合（不与其他代码逻辑交叉，可以继承，包含

使用JavaScript，按照面向对象的思想来构建组件。

现以构建一个TAB组件为例。

从功能上讲，组件包括可视部分和逻辑控制部分；从代码结构上讲，组件包括代码部分和资源部分（样式、图片等）。

组件的特点：高内聚，低耦合（不与其他代码逻辑交叉，可以继承，包含）；封装性（隐藏私有方法和变量）；可重用性（可反复多次使用，用来组装更复杂的应用）。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS 组件</title>
<style>
.TabControl{
	position:absolute;

}

.TabControl .tab-head{
	height:22px;width:100%;
/*	border-left: solid 0px #e0e0e0;border-right: solid 0px #e0e0e0;border-top: solid 0px #e0e0e0;border-bottom: solid 1px #e0e0e0; */
	position:absolute;
	z-index:9;
}

.TabControl ul{
	position:absolute;
	top:2px;
	padding:0px;
	margin:0px;
	z-index:10;
}

.TabControl li{
	list-style:none; /* 将默认的列表符号去掉 */
	padding-left:10px; padding-right:10px;
	margin:0; 
	float:left;
	border: solid 1px #e0e0e0;
	background-color:#ffffff;	
	height:20px;
	cursor:default;
}

.TabControl li.selected{
	border-bottom: solid 1px #ffffff;border-top: solid 1px #ff0000;
	z-index:10;	
}

.TabControl li.unselected{
	border-bottom: solid 1px #e0e0e0;border-top: solid 1px #e0e0e0;
	z-index:10;	
}


.TabControl .pageSelected{
	position:absolute;
	display:block;
	border: solid 1px #e0e0e0; 
	width:100%;height:100%;
	z-index:1;
	top:23px;
}

.TabControl .pageUnSelected{
	display:none;
	border: solid 1px #e0e0e0; 
	width:100%;height:100%;
	z-index:1;
	top:23px;	
}
</style>
</head>

<body>
<script lang="javascript">
	var TabControl = function(width, height){
	var me = this;
	
	//TAB控件容器，头，列表
	var cbody,tabHead, ul;	
	
	//最后选中的TAB页
	var lastSelectedPage = 0;
	
	//TAB页管理容器
	var pages = [];	
	

	/**
	 * 初始化函数
	 * param{tabCount}, 创建tab页的个数
	 */
	me.init = function(tabCount){
	//创建TAB容器
	cbody = document.createElement("p");
	cbody.className = "TabControl";
	cbody.style.width = width || "400px";
	cbody.style.height = height || "300px";

	 //创建TAB控件头
	tabHead= document.createElement("p");
	tabHead.className = "tab-head";
	cbody.appendChild(tabHead);
	
	//创建TAB头
	ul = document.createElement("UL");
	tabHead.appendChild(ul);
	
	//根据参数初始化TAB页，缺省创建2个TAB页
	var tc = tabCount || 2;
	
	for(var i=0;i<tc;i++){
	me.insertPage(i,"tabPage" + i) 
	}
	
	//缺省选中第一页
	me.selectPage(0); 
	}
	
	/**
	 * 插入TAB页
	 * param{idx},插入位置
	 * param{title},TAB页标题
	 *
	 */
	me.insertPage = function(idx,title){
	if(parseInt(idx)>=0){
	 	var li = document.createElement("LI");
	 	li.className = "unselected";
	 	li.innerText = title;
	 	var chd = ul.childNodes[idx];
	 	ul.insertBefore(li);
	 	li.onclick = function(){
	 	me.selectPage(getSelectedIndex(li));
	 	}
	 	
	 	
	 	//创建page
	 	var page = document.createElement("p");
	 	page.className = "pageUnSelected";
	 	pages.push(page);
	 	cbody.appendChild(page);
	 }	
	}
	
	/*
	 * 内部函数
	 * 根据选中的对象，获取对应的TAB页索引
	 */
	function getSelectedIndex(li){
	var chd = ul.childNodes;
	for(var i=0;i<chd.length;i++){
	if(chd[i] == li){
	return i;
	}
	}
	}
	
	
	/**
	 * 选中某页
	 * param{idx},选中页的索引
	 */
	me.selectPage = function(idx){
	if(parseInt(idx)>=0){	
	var lis = ul.childNodes;

	alert(lastSelectedPage + ',' + idx);
	lis[lastSelectedPage].className = "unselected";	
	lis[idx].className = "selected";

/*
	
	for(var i=0;i<lis.length;i++){
	if( i== idx){
	lis[i].className = "selected";
	} else{
	alert('B:'+ i + ',' + lis[idx].innerText);
	lis[i].className = "unselected";
	}

	}
*/	
	
	//隐藏无需显示的TAB页，显示选中的TAB页
	pages[lastSelectedPage].className = "pageUnSelected";	
	pages[idx].className = "pageSelected";	
	
	lastSelectedPage = idx;
	}

	}
	
	//在函数尾部调用初始化函数执行初始化
	me.init();
	
	 //最后返回DOM对象
	return cbody;
	}


	var tabControl = new TabControl();
	document.body.appendChild(tabControl);	
</script>
</body>

</html>

最终效果如图：

开发JavaScript组件完整示例代码分享

推荐度：

点击下载本文 文档为doc格式

标签：分享开发代码

热门焦点

开发JavaScript组件完整示例代码分享

开发JavaScript组件完整示例代码分享

开发JavaScript组件完整示例代码分享

最新推荐

猜你喜欢

热门推荐