封装的前端栏目选项卡

Home > Technology, Web > 封装的前端栏目选项卡

封装的前端栏目选项卡

December 8th, 2009 Leave a comment Go to comments

选项卡技术在前端设计中使用的频次很高，如果能有一套可以重复引用的精简版类最好不过。

页尾应用代码:

<script type="text/javascript">
var tab1 = new Tab({id:"tab1",eventType:"mouseover",tag1:"a",tag2:"ul"});
tab1.init();
var tab2 = new Tab({id:"tab2",eventType:"click",tag1:"a",tag2:"ul"});
tab2.init();
</script>

head部分引用代码：

<script type="text/javascript">
function Tab(obj){
	this.obj = obj;
}
Tab.prototype.init = function(){
	var $para = this.obj;
	var t1 = document.getElementById($para.id).getElementsByTagName($para.tag1);
	var t2 = document.getElementById($para.id).getElementsByTagName($para.tag2);
	this.$event = "on" + $para.eventType;
	t1[0].className = "current";
	t2[0].style.display = "block";
	for(var i=0;i<t1.length;i++){
		t1[i][this.$event] = (function(index){
			return function(){
				for(var j=0;j<t1.length;j++){
					t1[j].className = "";
					t2[j].style.display = "";
				}
				this.className = "current";
				t2[index].style.display = "block";
			}
		})(i);
	}
}
</script>