** panel.htc **
1<public:property name="ImagesSrc"></public:property>
1<public:property name="PanelCaption"></public:property>
1<public:attach event="ondocumentready" handler="DoInit"></public:attach>
1<public:attach event="onclick" handler="load"></public:attach>
1<script language="jscript">
2window.Panel=new Array();
3function DoInit(){
4if (!element.document.getElementById("oPanelHeader")){
5inithtml='<table height="31" cellSpacing="0" id="oPanelHeader" cellPadding="0" width="98%" border="0" align="center" >'+
6'<tr>'+
7' <td class="plTitleSpace" width="1%" height="31"> </td>'+
8' <td class="plTitleSelect" width="15%" height="31" isTitle="true">'+
9' <table style="FONT-SIZE: 12px" height="25">'+
10' <tr>'+
11' <td><IMG height="18" src="'+ImagesSrc+'" width="18"></td>'+
12' <td vAlign="bottom">'+PanelCaption+'</td>'+
13' </tr>'+
14' </table>'+
15' </td>'+
16' <td class="plTitleSpace" width="*%" height="31"> </td>'+
17'</tr>'+
18'</table>';
19element.insertAdjacentHTML("beforeBegin",inithtml);
20oPanelHeader.attachEvent("onclick",oPanelHeaderClick);
21}
22else{
23var rows=oPanelHeader.rows[0];
24var cell=rows.insertCell(rows.cells.length-1);
25cell.className="plTitleSpace";
26cell.width="1%";
27cell.innerHTML=" ";
28var cell=rows.insertCell(rows.cells.length-1);
29cell.className="plTitleUnSelect";
30cell.isTitle="true";
31cell.width="15%";
32cell.innerHTML= '<table style="FONT-SIZE: 12px" height="25">'+
33' <tr>'+
34' <td><IMG height="18" src="'+ImagesSrc+'" width="18"></td>'+
35' <td vAlign="bottom">'+PanelCaption+'</td>'+
36' </tr>'+
37'</table>';
38}
39window.Panel[window.Panel.length]=element;
40}
41function oPanelHeaderClick(){
42var e = GetObj(window.event.srcElement);
43if (e)
44if (e.className=="plTitleUnSelect"){
45for(i=0;i<window.Panel.length;i++){
46window.Panel[i].className="plPanelUnSelect";
47oPanelHeader.rows[0].cells[i*2+1].className="plTitleUnSelect";
48}
49window.Panel[(e.cellIndex+1)/2-1].className="plPanelSelect";
50e.className="plTitleSelect";
51}
52}
53function GetObj(src){
54if (src.parentElement.tagName!="BODY"){
55if (src.isTitle=="true") return src;
56return GetObj(src.parentElement)
57}
58return null;
59}
60</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
1<html>
2<head>
3<meta content="Microsoft Visual Studio 6.0" name="GENERATOR"/>
4<title></title>
5<link href="Common.css" rel="Stylesheet" type="text/css"/>
6</head>
7<body>
8<br/>
9<form>
10<table align="center" border="0" cellpadding="0" cellspacing="0" class="plPanelSelect" height="90%" id="oContent" imagessrc="sheet.gif" panelcaption="个人信息" width="98%">
11<tr>
12<td align="center" valign="top" width="100%">
13<table border="0" cellpadding="0" cellspacing="0" height="107" width="100%">
14<tr>
15<td colspan="2" height="26"> </td>
16</tr>
17<tr>
18<td height="26" width="50%">用户名:</td>
19<td height="26" width="50%">密码:</td>
20</tr>
21<tr>
22<td height="26" width="50%"></td>
23<td height="26" width="50%">
24</td>
25</tr>
26<tr>
27<td height="27" width="50%">姓名:</td>
28<td height="27" width="50%"> </td>
29</tr>
30<tr>
31<td height="27" width="50%"><input name="es" type="submit" value="test"/> </td>
32<td height="27" width="50%"></td>
33</tr>
34</table>
35</td>
36</tr>
37</table>
38<table align="center" border="0" cellpadding="0" cellspacing="0" class="plPanelSelect" height="90%" id="oContent" imagessrc="sheet.gif" panelcaption="详细信息" width="98%">
39<tr>
40<td align="center" valign="top" width="100%">
41gdfgdfgdf
42</td>
43</tr>
44</table>
45</form>
46</body>
47</html>