javascriptの通用簡単なテーブルタブの実現(二)

4700 ワード

元に戻ります.スタイルが切り替わったら、コントロールをページに返します.つまり、テーブル.jsは切替モードと記録操作のみを制御します.

 
  
 
  
 
  
 
  
 
  
New Web Project 
  
 
  
 
  
 
  
 
  
 
  
 
  
    
  
 
  
 
  
    
  
 
  
 
  
    
  
 
  
 
  
    
  
 
  
 
  
    
  
 
  
 
  
 
  
 
  
            
  
 
  
 
  
            
  
 
  
 
  
            
  
 
  
 
  
            
  
 
  
 
  
            
  
 
  
 
  
  
  
 
  <br>//         ：obj.lastIndex(      ) obj.index(      ) obj.arr(       ) 
  <br>var back=function(obj) 
  <br>{ 
  <br>var lastPoint=obj.arr[obj.lastIndex].getAttribute("point"); 
  <br>var curentPoint=obj.arr[obj.index].getAttribute("point"); 
  <br>document.getElementById(lastPoint).style.display="none"; 
  <br>document.getElementById(curentPoint).style.display="block"; 
  <br>} 
  <br>//     ：   ID                 （0  ） 
  <br>table("sidebar", "active",back,0); 
  <br>

 
  
//         ：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);

テーブル.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]); 
  
} 
  
}

reduce使用まとめ