发布一个通用面板程序(htc)

作者:网络 来源:佚名 更新时间:2008-07-09 17:16:44 点击:
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">&nbsp;</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">&nbsp;</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="&nbsp;";
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=http://www.163design.net/n/b/"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=http://www.163design.net/n/b/"sheet.gif" panelcaption="详细信息" align="center">
<tr>
<td width="100%" align="center" valign="top">
gdfgdfgdf
</td>
</tr>
</table>

</form>
</body>
</html>

中国最大的web开发资源网站及技术社区,