datagrid样式

最新推荐文章于 2023-07-04 21:07:15 发布

原创最新推荐文章于 2023-07-04 21:07:15 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #function #behavior #vbscript #button #url

博客主要展示了通过CSS和HTC文件实现Datagrid样式及交互的代码。CSS部分定义了链接、表格、表头、按钮等的样式，HTC文件则使用VBScript和JScript实现了鼠标悬停、移出、点击等交互效果，还对datagrid的表头和选择行进行了定义。

==============css==============
A {
COLOR: #0066cc; TEXT-DECORATION: none
}
A:hover {
COLOR: #FF9900; TEXT-DECORATION: underline
}
A:active {
TEXT-DECORATION: none
}
.tbl3 {
BACKGROUND-COLOR: #C1CDD8;
behavior: url(datatable2.htc);
}
.tbl3 tr {
color: #0E4279;
BACKGROUND-COLOR: #ffffff;
}
.trHead A {
behavior: url(trHeada2.htc);
FONT-WEIGHT: bold;
    COLOR: #FFFFFF;
width:100%;
height:100%;
}
.trHead A:hover {
COLOR: #10659E;
TEXT-DECORATION: none;
}
.trHead TD {
padding-top:4px;
padding-bottom:0px;
BACKGROUND-COLOR: #5E91DA;
COLOR: #ffffff;
    behavior: url(trHead2.htc);
border-bottom:2px solid #5E91DA;
}
.trSelect TD {
    color: #0E4279;
BACKGROUND-COLOR: #F0F0F0;
}
TD {
FONT-SIZE: 12px;
}
.btn {
behavior: url(button2.htc);
BORDER:#5E91DA 2px solid;
PADDING-RIGHT: 12px;
PADDING-LEFT: 12px;
FONT-SIZE: 12px;
CURSOR: hand;
COLOR: #ffffff;
PADDING-TOP: 2px;
HEIGHT: 16pt;
BACKGROUND-COLOR: #5E91DA;
}

==============datatable2.htc==============
<PUBLIC:COMPONENT>
<PUBLIC:attach event="oncontentready" onevent="initElement()" />
<PUBLIC:attach   event="ondetach" onevent="cleanupElement()" />

sub initElement()
with element
.attachEvent "onmouseover", GetRef("elementOnMouseOver")
.attachEvent "onmouseout", GetRef("elementOnMouseOut")
end with
end sub

sub cleanupElement()
with element
.detachEvent "onmouseover", GetRef("elementOnMouseOver")
.detachEvent "onmouseout", GetRef("elementOnMouseOut")
end with
end sub

sub elementOnMouseOver
set el = window.event.srcElement
do while (el.tagName <> "TR" and el.tagName <> "TABLE")
set el = el.parentElement
loop
if (el.tagName <> "TR") then exit sub
if (el.className<>"trHead" and el.className<>"trSelect") then hiliteRow el
set el = nothing
end sub

sub elementOnMouseOut
hiliteRow nothing
end sub

sub hiliteRow(el)
if (not currentRow is nothing) and (el is nothing) then
  with currentRow.runtimeStyle
   .color = ""
   .backgroundColor = ""
  end with
end if
if not el is nothing then
  with el.runtimeStyle
  .color = fontColor
  .backgroundColor = bgColor
  end with
end if
set currentRow = el
end sub
</script>
</PUBLIC:COMPONENT>

==============trhead2.htc==============
<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doOver()" />
   <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="doOut()" />
   <SCRIPT LANGUAGE="JScript">
   function doOver()
   {
if(this.childNodes.length>0)
  if(this.childNodes(0).tagName=="A")
  {
   // 鼠标移到目标上的效果
   this.runtimeStyle.backgroundColor="#FAF8F3";    // 排序td背景色
   this.runtimeStyle.borderBottomColor="#f6c456";   // 排序td下划线颜色
   this.childNodes(0).runtimeStyle.color = "#10659E";  // 排序td字符颜色
  }
   }

   function dofocus()
   {
this.blur();
   }

   function doOver()
   {
     this.style.borderLeftColor = lfColor;
     this.style.borderRightColor = rtColor;
     this.style.borderTopColor = lfColor;
     this.style.borderBottomColor = rtColor;
     this.style.backgroundColor = InbkColor;
   }

   function doOut()
   {
     this.style.borderLeftColor = OutbkColor;
     this.style.borderRightColor = OutbkColor;
     this.style.borderTopColor = OutbkColor;
     this.style.borderBottomColor = OutbkColor;
     this.style.backgroundColor = OutbkColor;
   }
   function doDown()
   {
     this.style.borderLeftColor = rtColor;
     this.style.borderRightColor = lfColor;
     this.style.borderTopColor = rtColor;
     this.style.borderBottomColor = lfColor;
     this.style.backgroundColor = InbkColor;
   }

   function doUp()
   {
doOver();
   }

   function x()
   {
this.style.color= "#000000";
   }

</SCRIPT>
</PUBLIC:COMPONENT>

datagrid = tbl3
datagrid 表头tr = trhead
datagrid 选择的数据行 tr = trselect