cari

Rumah  >  Artikel  >  hujung hadapan web  >  开发JavaScript组件完整示例代码分享

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

黄舟
黄舟asal
2017-03-18 15:00:031359semak imbas

使用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 + &#39;,&#39; + 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(&#39;B:&#39;+ i + &#39;,&#39;  + 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>


最终效果如图：


Atas ialah kandungan terperinci 开发JavaScript组件完整示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript求非空子集数目的实现方法Artikel seterusnya：使用jQuery进行组件开发完整例子详解

Artikel berkaitan

Lihat lagi