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

最新推荐文章于 2025-08-14 13:36:00 发布

原创最新推荐文章于 2025-08-14 13:36:00 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#htc #border #table #stylesheet #class #behavior

C# 专栏收录该内容

3 篇文章

订阅专栏

该博客主要围绕前端开发，通过panel.htc文件定义属性和事件处理函数，Common.css文件设置样式，index.htm文件构建页面结构，实现了面板的交互效果，包括标题样式切换、面板显示与隐藏等功能。

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>