javascript之通用简单的table选项卡实现(二)

　　继续完善上篇中的选项卡。

　　上篇中的选项卡存在这样的问题：把逻辑封装在table.js中，不够灵活，也就是说如果某个选项卡是实现异步请求或者跳转，而非div的显隐切换，那么就得修过table.js来达到目的，显然不是我所需要的。

　　回归原始，当样式切换后，把控制权还给页面，即table.js仅控制切换样式和记录操作：

　　

完整html源码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
         <style type="text/css">
            .sidebar {
                width: 140px;
                background: #C9E4D6;
                min-height: 600px;
                float: left;
                border-left: solid 1px #C8C8C8;
            }
            
            .sidebar ul {
                list-style:none;
                text-align: left;
                padding: 20px 0px 0px 0px;
            }
            
            .sidebar ul li {
                border-bottom: 1px dotted #C8C8C8;
                font-size: 14px;
                height: 30px;
                line-height: 30px;
                padding-left: 15px;
                margin-left: 15px;
                cursor: pointer;
            }
            
            .sidebar .active {
                background: #fff;
            }
            .content{
                height:600px;
                width:400px;
                border-right:1px solid #ccc;
                margin-left:140px;
                padding:20px;
                display:none;
            }
        </style>
    </head>
    <body>
        <div class="sidebar" id="sidebar">
            <ul>
                <li point="table1">
                    选项一
                </li>
               <li point="table2">
                    选项二
                </li>
               <li point="table3">
                    选项三
                </li>
               <li point="table4">
                    选项四
                </li>
               <li point="table5">
                    选项五
                </li>
            </ul>
        </div>
        <div id="table1" class="content">
            这是第一个选项卡的内容
        </div>
        <div id="table2" class="content">
            这是第二个选项卡的内容
        </div>
        <div id="table3" class="content">
            这是第三个选项卡的内容
        </div>
        <div id="table4" class="content">
            这是第四个选项卡的内容
        </div>
        <div id="table5" class="content">
            这是第五个选项卡的内容
        </div>
    </body>
    <script type="text/javascript" src="table.js"> </script>
    <script type="text/javascript">
        //回调函数 可用参数：obj.lastIndex(上次选项索引)    obj.index(当前选项索引) obj.arr(选项卡元素数组)
        var back=function(obj)
        {
            var lastPoint=obj.arr[obj.lastIndex].getAttribute("point");
            var curentPoint=obj.arr[obj.index].getAttribute("point");
            document.getElementById(lastPoint).style.display="none";
            document.getElementById(curentPoint).style.display="block";
        }
        //参数分别为：选项块ID      选中的样式     回调函数        默认选择项（0开始）
        table("sidebar", "active",back,0);
    </script>
</html>

 

 

　　

    	//回调函数 可用参数：obj.lastIndex(上次选项索引)	obj.index(当前选项索引) obj.arr(选项卡元素数组)
		var back=function(obj)
		{
			var lastPoint=obj.arr[obj.lastIndex].getAttribute("point");
			var curentPoint=obj.arr[obj.index].getAttribute("point");
			document.getElementById(lastPoint).style.display="none";
			document.getElementById(curentPoint).style.display="block";
		}
		//参数分别为：选项块ID	  选中的样式	 回调函数		默认选择项（0开始）
        table("sidebar", "active",back,0);

 

　　table.js代码如下：

/**
 * @author Sky
 */
var table=function(id,active,callBack,index)
{
	table[id]=new Table(id,active,callBack,index);
	table[id].bind();
}
var Table=function(id,active,callBack,index)
{
	this.index=parseInt(index)||0;//当前索引
	this.lastIndex=this.index;//上次索引
	
	this.callBack=callBack||function(){};
	this.active=active||"active";
	
	this.id=id;
	
	this.arr=document.getElementById(id).getElementsByTagName("li");
}
Table.prototype={
	bind:function()
	{
		//初始化选项样式
		this.setTable(this.index);
		
		//绑定事件
		var _self=this;
		for (var i = 0; i < this.arr.length; i++)
		{
			this.arr[i].setAttribute("extatt", i);//钩子
			this.arr[i].onclick = function(e)
			{
				var _e = window.event||e;
				var _target=_e.srcElement || _e.target;
				_self.setTable(parseInt(_target.getAttribute("extatt")));
			}
		}
	},
	setTable:function(index)
	{
		this.lastIndex=this.index;
		this.index=index;
		//清除之前选项的样式
		this.arr[this.lastIndex].className="";
		
		//激活当前选项的样式
		this.arr[this.index].className=this.active;
		
		//执行回调函数
		this.callBack(table[this.id]);
	}
}

posted on 2010-05-08 20:21  唯C  阅读(1039)  评论(0)    收藏  举报

导航