简单的js模拟tab选项卡

最新推荐文章于 2023-02-09 16:19:47 发布

jackeysion

最新推荐文章于 2023-02-09 16:19:47 发布

阅读量330

点赞数

文章标签： prototype CSS JSP

本想做成一个扩展性好的,结果做来做去总是不理想 , 慢慢来吧 , 先把做好的保存一下 ,
css很粗糙....


<html>
<head>
<title>
</title>
<style type="text/css">
<!--
#TabPage{
  position:absolute;
  left: 400px;
  top: 200px;
  height: 400px;
  width: 300px;
  border-color: blue;
  border: solid 1px;
  background-color: lightblue;
}
#Tab{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 30px;
  border-color: red;
  border: solid 1px;
  font-size: 12px;
  color: blue;
}
.subTab{
	float: left;
	width: 60px;
	height:100%; 
}
#Page{
  position: absolute;
  left: 0;
  top: 31px;
  width: 100%;

  border-color: black;
  border:solid 1px;
  background-color: white;
}
-->
</style>
<script type="text/javascript">
<!--
  var str = "";
  var zIndex = 0;
  var tabpage;
 /* function _Tab(tabName){
    this.Nodes = [];
    this.tabName = tabName;
  }
  function _Page(pageName){
    this.pageName = pageName;
    this.Nodes = [];
  }*/
  function _TabPage(){
    //tabpage有两个子数组, 分别标识有几个tab和page,以及其对应关系.根据索引对应.
    this.tabs = [];
    this.pages = [];
  }
  function _Tab (id ,title ,url ){ 
    this.id = id;
    this.title = title; 
    this.url = url; 
  }
  function _Page (id , title , tabId){
    this.id = id;
    this.title = title;
    this.tabId = tabId;
  }

  _TabPage.prototype.add = function(_tab , _page){
    if(!_tab || !_page) return;//如果有一个为空 , 就不用做操作了.
    //initpage.
    var tab = document.createElement("div");
    tab.id = _tab.id;  
    //添加鼠标经过事件 , 
    //tab.onmouseover = function (tabId){this.showCurrentPage();};
    tab.attachEvent('onmouseover',function(){
			var srcE = event.srcElement;
			var tabId = srcE.id; 
		    for(var i = 0 ; i < $('Page').childNodes.length ;i++){ 
		  		$('Page').childNodes[i].style.display = 'none'; 
		  	}
		  	for(var i = 0 ; i <$('Page').childNodes.length;i++){ 
		  		if(tabId ==  $('Page').childNodes[i].tabId){
		  			$('Page').childNodes[i].style.display = 'block';
		  			return;
		  		}
	  		}
  		}
  	);  

    if(_tab.className) tab.className = _tab.className;
    else tab.className = 'subTab';
    //tab.innerHTML = _tab.url ? '<a href="' + _tab.url + '">' + _tab.title + '</a>' : _tab.title;
    tab.innerHTML = _tab.title;
    this.tabs[this.tabs.length] = _tab; 
    document.getElementById('Tab').appendChild(tab);

    var page = document.createElement("div");
    page.id = _page.id;
    page.tabId = _page.tabId;
    if(_page.className) page.className = _page.className; 
    page.innerHTML = _page.title; 
    page.style.display = 'none';
    this.pages[this.pages.length] = page;  
    document.getElementById('Page').appendChild(page);

 	this.pages[0].style.display = 'block';
  }

  function createTabPage(id ,title , url){ 

    var tab = new _Tab(id ,title,url);
    //page中的内容应该是一个jsp页面. 
    var page = new _Page('p1','内容' + (zIndex++) , tab.id);

    tabpage.add(tab , page);
  }
  function page_init(){
    tabpage = new _TabPage();
    $('Page').style.height = $('TabPage').offsetHeight - $('Tab').offsetHeight; 
    createTabPage('0','个人信息','./empInfo.do?method=');
    createTabPage('1','单位信息','./empInfo.do?method=');
  }
  function $(id){
    return document.getElementById(id);
  }
  //显示当前tab对应的page
  _TabPage.prototype.showCurrentPage=function (tabId){ 

  	alert(tabId);
  	for(var i = 0 ; i < $('Page').childNodes.length ;i++){ 
  		$('Page').childNodes[i].style.display = 'none';
  		alert($('Page').childNodes[i].tabId);
  	}  

  	for(var i = 0 ; i <  $('Page').childNodes.length ;i++){
  		if(tabId ==  $('Page').childNodes[i].tabId){
  			$('Page').childNodes.length = 'block';
  			return;
  		}
  	}
  }
  window.onload = page_init;
//-->
</script>
</head>
<body >
  <div id="TabPage" class="TabPage">
    <div id="Tab" class="Tab">
    </div>
    <div id="Page" class="Page">
    </div>
  </div>
</body>
</html>