datagrid样式
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()" />
<script language="VBScript">
dim fontColor
dim bgColor
dim currentRow
fontColor = "#0E4279"
bgColor = "#F3F3F3"
set currentRow = nothing
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 doOut()
{
if(this.childNodes.length>0)
if(this.childNodes(0).tagName=="A")
{
// 鼠标移出目标的效果(还原)
this.runtimeStyle.borderBottomColor="";
this.runtimeStyle.backgroundColor="";
this.childNodes(0).runtimeStyle.color="";
}
}
</SCRIPT>
</PUBLIC:COMPONENT>
==============trheada2.htc==============
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onfocus" " ONEVENT="dofocus()" />
<SCRIPT LANGUAGE="JScript">
function dofocus()
{
this.blur();
}
</SCRIPT>
</PUBLIC:COMPONENT>
==============button2.htc==============
<PUBLIC:COMPONENT URN="urn:msdn-microsoft-com:workshop" >
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="doOut()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="doDown()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="doUp()" />
<PUBLIC:ATTACH EVENT="onfocus" " ONEVENT="dofocus()" />
<SCRIPT LANGUAGE="JScript">
var lfColor = "#7eb3fc";
var rtColor = "#2a4377";
var InbkColor = "#4c7fc8";
var OutbkColor = "#5E91DA";
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