码迷,mamicode.com
首页 > 其他好文 > 详细

简易选项卡面向对象加事件委托方式实现

时间:2015-04-21 20:18:38      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

  选项卡,都不陌生,今天把之前的代码翻出来重写了下。不多说了,直接上代码

<script>
	function Tab(){
		this.init.apply(this,arguments);
	}
	
	Tab.prototype = {
		/*
			初始化方法
			获取html元素(视图),并绑定事件
		*/
		init:function(){
			this.tab = document.getElementById(‘tab‘);
			this.tabs = tab.getElementsByTagName(‘li‘);
			this.contents = document.getElementById(‘content‘).getElementsByTagName(‘ul‘);
			
			for(var i=0;i<this.tabs.length;i++){
				this.tabs[i].index = i;
			}
			
			this.addListener(this.tab,‘click‘,this.bind(this,this.showTab));
		},
		/*
			改变函数func的执行上下文
		*/
		bind:function(obj,func){
			return function(e){
				func.apply(obj,arguments);
			}
		},
		/*
			通用事件监听方法兼容w3c和IE
		*/
		addListener:function(ele,envtype,handler,isBubble){
			if(ele.addEventListener){
				ele.addEventListener(envtype,handler,isBubble);
			}else if(ele.attachEvent){
				ele.attachEvent("on" + envtype,handler);
			}else{
				ele["on" + enctype] = handler;
			}
		},
		/*
			选项卡的业务逻辑
		*/
		showTab:function(e){
			var event = e || window.event;
			var targetObj = event.target || event.srcElement;
			if(targetObj.nodeName == ‘LI‘){
				for(var i=0;i<this.tabs.length;i++){
				this.tabs[i].className = "";
			  }
				targetObj.className = ‘current‘;
				for(var i=0;i<this.contents.length;i++){
					this.contents[i].style.display = ‘none‘;
				}
				this.contents[targetObj.index].style.display = ‘block‘;
			}
		}
	}
	
	window.onload = function(){
		new Tab();
	}
</script>

  

简易选项卡面向对象加事件委托方式实现

标签:

原文地址:http://www.cnblogs.com/submerge/p/4445134.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!