panel.htc <PUBLIC:PROPERTY NAME="ImagesSrc" /> <PUBLIC:PROPERTY NAME="PanelCaption" /> <PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" /> <PUBLIC:ATTACH EVENT="onclick" HANDLER="load" /> <SCRIPT LANGUAGE="jscript"> window.Panel=new Array(); function DoInit(){ if (!element.document.getElementById("oPanelHeader")){ inithtml='<table height="31" cellSpacing="0" id="oPanelHeader" cellPadding="0" width="98%" border="0" align="center" >'+ '<tr>'+ ' <td class="plTitleSpace" width="1%" height="31"> </td>'+ ' <td class="plTitleSelect" width="15%" height="31" isTitle="true">'+ ' <table style="FONT-SIZE: 12px" height="25">'+ ' <tr>'+ ' <td><IMG height="18" src="'+ImagesSrc+'" width="18"></td>'+ ' <td vAlign="bottom">'+PanelCaption+'</td>'+ ' </tr>'+ ' </table>'+ ' </td>'+ ' <td class="plTitleSpace" width="*%" height="31"> </td>'+ '</tr>'+ '</table>'; element.insertAdjacentHTML("beforeBegin",inithtml); oPanelHeader.attachEvent("onclick",oPanelHeaderClick); } else{ var rows=oPanelHeader.rows[0]; var cell=rows.insertCell(rows.cells.length-1); cell.className="plTitleSpace"; cell.width="1%"; cell.innerHTML=" "; var cell=rows.insertCell(rows.cells.length-1); cell.className="plTitleUnSelect"; cell.isTitle="true"; cell.width="15%"; cell.innerHTML= '<table style="FONT-SIZE: 12px" height="25">'+ ' <tr>'+ ' <td><IMG height="18" src="'+ImagesSrc+'" width="18"></td>'+ ' <td vAlign="bottom">'+PanelCaption+'</td>'+ ' </tr>'+ '</table>'; } window.Panel[window.Panel.length]=element; } function oPanelHeaderClick(){ var e = GetObj(window.event.srcElement); if (e) if (e.className=="plTitleUnSelect"){ for(i=0;i<window.Panel.length;i++){ window.Panel[i].className="plPanelUnSelect"; oPanelHeader.rows[0].cells[i*2+1].className="plTitleUnSelect"; } window.Panel[(e.cellIndex+1)/2-1].className="plPanelSelect"; e.className="plTitleSelect"; } } function GetObj(src){ if (src.parentElement.tagName!="BODY"){ if (src.isTitle=="true") return src; return GetObj(src.parentElement) } return null; } </script> Common.css .plTitleSelect { border-right: #999999 1px solid; border-top: #999999 1px solid; font-size: 12px; border-left: #999999 1px solid; cursor: hand; border-bottom: #999999 0px solid; background-color: #ffffff; text-align: center; } .plTitleUnSelect { border-right: #999999 1px solid; border-top: #999999 1px solid; font-size: 12px; border-left: #999999 1px solid; cursor: hand; border-bottom: #999999 1px solid; background-color: #ececec; text-align: center; } .plTitleSpace { font-size: 12px; border-bottom: #999999 1px solid; text-align: center; } .plPanelSelect { border-right: #999999 1px solid; border-top: #999999 0px solid; display: block; font-size: 12px; border-left: #999999 1px solid; border-bottom: #999999 1px solid; background-color: #ffffff; behavior: url(panel.htc); } .plPanelUnSelect { border-right: #999999 1px solid; border-top: #999999 0px solid; display: none; font-size: 12px; border-left: #999999 1px solid; border-bottom: #999999 1px solid; background-color: #ffffff; behavior: url(panel.htc); } index.htm <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <LINK href="Common.css" type="text/css" rel="Stylesheet"> </HEAD> <BODY> <br> <form> <table class="plPanelSelect" id="oContent" height="90%" cellSpacing="0" cellPadding="0" width="98%" border="0" ImagesSrc="sheet.gif" PanelCaption="个人信息" align="center"> <tr> <td width="100%" align="center" valign="top"> <table border="0" width="100%" cellspacing="0" cellpadding="0" height="107"> <tr> <td colspan="2" height="26"> </td> </tr> <tr> <td height="26" width="50%">用户名:</td> <td width="50%" height="26">密码:</td> </tr> <tr> <td height="26" width="50%"></td> <td width="50%" height="26"> </td> </tr> <tr> <td height="27" width="50%">姓名:</td> <td width="50%" height="27"> </td> </tr> <tr> <td height="27" width="50%"><input type="submit" value="test" name="es"> </td> <td width="50%" height="27"></td> </tr> </table> </td> </tr> </table> <table class="plPanelSelect" id="oContent" height="90%" cellSpacing="0" cellPadding="0" width="98%" border="0" ImagesSrc="sheet.gif" PanelCaption="详细信息" align="center"> <tr> <td width="100%" align="center" valign="top"> gdfgdfgdf </td> </tr> </table> </form> </BODY> </HTML>

|