|
|
本想做成一个扩展性好的,结果做来做去总是不理想 , 慢慢来吧 , 先把做好的保存一下 ,
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> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡