<HTML> <HEAD> <script language="javascript1.2"> // All Codez Modifed & Writen By Windy_sk, // You Can Use It Freely , But You Must Hold This Item !
var Card_list = new Array();
function Cardz(title,content) { this.title = title; this.content = content; }
//You can add the url list you wanted, format as below;
Card_list[0] = new Cardz("表单","<form action=''>性别:<input type=radio checked name=sex>男<input name='sex' type=radio>女<br>姓名:<input name='name'><br>工作:<select name='job'><option>待业</option><option>在学</option><option>工作</option></select><br><input type=submit><form>"); Card_list[1] = new Cardz("图片","<img src=http://www.agriffchina.com/pic/banner1.gif width=350 height=60>"); Card_list[2] = new Cardz("iFrame","<iframe style='filter:flipV()' src='http://www.sina.com.cn' width=400 height=90% marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=1></iframe>"); Card_list[3] = new Cardz("表格","<table border=1 width=100%><td>表格</td></tr><tr><td>111111111111</td></tr><tr><td>222222222222</td></tr></table>"); Card_list[4] = new Cardz("滚动字幕","<marquee> 滚动字幕 </marquee>");
var Num = Card_list.length; var cur_card = 1;
function document.onmousedown(){ var obj=event.srcElement var pobj=obj.parentElement.id; if(obj.className=="span"){ for(i=1;i<=Num+1;i++){
if(pobj==("btn"+i)){ document.all("td"+i).style.backgroundColor = "menu"; document.all("btn"+i).style.height = 20; if(i!=cur_card)content(i) cur_card = i; }else{ if(i<=Num){ document.all("td"+i).style.backgroundColor = "white"; document.all("btn"+i).style.height = 18; } } } } }
function content(i){ Content.innerHTML = Card_list[i-1].content }
function init(){ for(i=1;i<=Num;i++) document.all("MenuName"+i).innerText = Card_list[i-1].title; content(1); }
</script>
<style> td{font-size:9pt} .span{ cursor:default; padding-left:5; padding-top:2; padding-right:5; padding-bottom:0; width:70px; height:100%; TEXT-ALIGN: center; } </style> <TITLE>Table_Card</TITLE> <META http-equiv="content-type" content="text/html;charset=gb2312"> </HEAD> <BODY bgcolor=#FFFFFF onload=init()> <p> <table width=0 align=center><tr><td> <table cellpadding=0 cellspacing=0> <tr height=20 onselectstart="return false"> <script language="javascript1.2"> for(i=1;i<=Num;i++){ tdBody="<td valign=bottom>" tdBody+="<table cellspacing=0 cellpadding=0 bgcolor='menu'>" tdBody+="<tr>" tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>" tdBody+="<td bgcolor=white><\/td><td></td><td></td>" tdBody+="<\/tr>" tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>" tdBody+="<td></td><td bgcolor=black><\/td><td></td>" tdBody+="<\/tr>" tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>" tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+">title<\/span></td><td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>" tdBody+="<\/tr>" tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>" tdBody+="<\/tr>" tdBody+="<\/table>" tdBody+="<\/td>"; document.write(tdBody) } document.all("td1").style.backgroundColor = "menu"; document.all("btn1").style.height = 20; </script> <td style="border-bottom:1 white solid" width="50"></td> </tr> </table> <div style="BACKGROUND-COLOR: menu;padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset"> <span id=Content>Content</span> </div> </td></tr></table> </BODY> </HTML> |