面向对象的tab（选项卡）

tab（选项卡）技术很常见，即使刚踏入前端开发的同学都会使用它去完成一些基本的任务。这里讨论的是一种面向对象的tab，其实是换一种设计模式来设计代码，这里用到的是简单工厂，这个Tab类提供很多借口，如onSwitch,switchTo...利用这个tab组件可以定制形式多样化的tab。

使用方法简单，详细参考如下demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>面向对象的选项卡---振之博文</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ color:#000;}
h1{ text-align:center; line-height:80px; text-shadow:1px 1px 1px #ccc; color:#666;}
.tab{ width:606px; margin:0 auto 50px; color:#555;}
.tab h2{ overflow:hidden; width:100%; font-size:14px;}
.tab h2 a{ float:left; width:200px; line-height:24px; text-align:center; border:1px solid #d5d5d5; cursor:pointer;}
.tab h2 a.current{ border:1px solid #d5d5d5; border-width:1px 1px 0; color:#FF3300;}
.tab ul{ display:none; border:1px solid #d5d5d5; border-top:0; padding:8px 0;line-height:24px; }
.tab ul li{ list-style:inside decimal; margin-left:10px;}
#copyright{ width:606px; margin:0 auto;}
</style>
<script type="text/javascript">
/**
 * 构造函数
 * @class Tab   
 */
function Tab(){
	this.init.apply(this,arguments);
}
Tab.prototype = {
	 /**
      * 初始化
      * @param id{string} tab容器的id
      * @param config{object} 配置项
      * @配置说明:eventType{string} 触发事件类型   
      *           navTag{string} tab导航的标签名
	              navCell{string} tab导航内的标签名称
				  content{string} tab切换内容容器的标签名称
				  navActiveClass{string} tab切换时导航的高亮样式
				  onSwitch{fn} tab切换的回调,fn所带参数为object，有index、navcell、content三个属性 
      * @return void
      */
	init: function(id,config){
		var that = this;
		config = that.config = that.checkInterface(config);
		that.bindEvent(id,config);
	},
	/**
	 * 简写byid方法
	 */
	$: function(id){
		return document.getElementById(id);
	},
	/**
      * 验证接口,构建正确的参数形式
      * @param obj{object} 配置项
      * @return object   
      */
	checkInterface: function(obj){
		return {
			eventType: obj.type || 'click',
			navTag: obj.navTag || 'h2',
			navCell: obj.navCell || 'a',
			content: obj.content || 'ul',
			navActiveClass: obj.navActiveClass || 'current',
			onSwitch: obj.onSwitch || new Function
		};
	},
	/**
	 * 增加事件监听
	 * @param id{string} tab容器的id
	 * @param config{object} 见上
	 * @return 实例对象本身
	 */
	bindEvent: function(id,config){
		var that = this;
		var obj = that.obj = that.$(id),
			navcell = that.navcell = obj.getElementsByTagName(config.navTag)[0].getElementsByTagName(config.navCell),
			content = that.content =  obj.getElementsByTagName(config.content),
			eventType = 'on' + config.eventType;
		that.switchTo(0);
		for(var i=navcell.length;i--;){
			navcell[i][eventType] = that.makeCallback(i);
		}
		return that;
	},
	/**
	 * 闭包存储当前索引
	 * @param index{number} 索引
	 * @return fn
	 */
	makeCallback: function(index){
		var that = this;
		return function(){
			that.switchTo(index);
		}
	},
	/**
	 * tab切换调用的方法
	 * @param index{number} 索引
	 * @return 实例对象本身
	 */
	switchTo: function(index){
		var that = this;
		for(var i=that.navcell.length;i--;){
			that.navcell[i].className = '';
			that.content[i].style.display = '';
		}
		that.navcell[index].className = 'current';
		that.content[index].style.display = 'block';
		var o = {
			navcell: that.navcell[index],
			content: that.content[index],
			index: index
		};
		that.config.onSwitch.call(that,o);
		return that;
	}
};
</script>
</head>

<body>
<h1>封装的选项卡</h1>
<div class="tab" id="tab1">
	<h2><a>选项1</a><a>选项2</a><a>选项3</a></h2>
	<ul>
		<li>选项1内容</li>
		<li>选项1内容</li>
		<li>选项1内容</li>
		<li>选项1内容</li>	
	</ul>
	<ul>
		<li>选项2内容</li>
		<li>选项2内容</li>
		<li>选项2内容</li>
		<li>选项2内容</li>	
	</ul>
	<ul>
		<li>选项3内容</li>
		<li>选项3内容</li>
		<li>选项3内容</li>
		<li>选项3内容</li>	
	</ul>
</div>
<div id="copyright"><a href="http://www.cnblogs.com/zhenn/">振之博文</a> 版权所有 转载请说明出处</div>
<script type="text/javascript">
var tab1 = new Tab('tab1',{
	eventType: 'click',
	navTag: 'h2',
	navCell: 'a',
	content: 'ul',
	navActiveClass: 'current',
	onSwitch: function(o){
		alert(o.content.tagName)
	}
}).switchTo(1);
</script>
</body>
</html>

posted on 2011-02-20 13:24 zhenn 阅读(625) 评论(0) 编辑收藏举报

刷新页面返回顶部

关于我

振之博文

面向对象的tab（选项卡）

公告

导航