IDC资讯中心
下文将为您演示如何将datagrid实现为一个立体的表格，以及如何实现在image按钮中实现立体感的效果。为了完成上面的内容我们首先要对css的自定义样式有所了解，然后就是一些简单的js代码。
为了实现立体大datagrid我们需要创建一个工程，里面有一个datagrid以及绑定在其上的数据，代码如下：
<asp:datagrid id="datagrid1" runat="server" gridlines="horizontal" style="border-collapse:separate">
<itemstyle ></itemstyle>
</asp:datagrid>
上面的代码中有一个地方非常重要，就是设置style的属性那里，记得一定要写成这样。有了这个数据网格以后我们需要写一个可以实现立体效果的css样式，css样式如下所示：
<style>
.soliddatagrid{
coolsoliddatagrid:expression(applysolidtable(this));
border-color:#ffffff;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
}
.soliddatagriditem{
coolsoliddatagridrow:expression(applysolidtr(this));
}
</style>
从代码中我们可以看到使用了自定义的样式，该样式使用js来实现的，所以我们还要有下面的js代码来支持上面的css样式。js代码如下所示：
<script language="javascript">
function applysolidtable(obj){
obj.cellpadding = "0px";
obj.cellspacing = "0px";
obj.border = "1px";
obj.width = "100%";
}
function applysolidtr(obj){
for(var i=0;i<=obj.cells.length-1;i++){
applysolidtd(obj.cells(i));
}
}
function applysolidtd(currenttd){
currenttd.bgcolor = "#e1e2e2";
currenttd.bordercolorlight = "#929292";
currenttd.bordercolordark = "#ffffff";
}
</script>
代码的细节我就不详细表述了，最后只要将上面的css应用在我们的datagrid里面就可以实现立体的datagrid效果。最终的datagrid如下所示：
<asp:datagrid id="datagrid1" runat="server" cssclass="soliddatagrid" gridlines="horizontal" style="border-collapse:separate">
<itemstyle cssclass="soliddatagriditem"></itemstyle>
</asp:datagrid>
接下来是如何实现有立体效果的image按钮，其实很简单就是实现一般windows里面按钮的效果，打开word将鼠标移动到工具条后你就可以看到该方法实现的效果。操作如下：你可以放一个imagebutton或者被浏览器最后解释成image的控件，为了实现这个效果我们需要下面的js脚本，但是由于我们想重用这个脚本所以我将它写到一个htc文件中，文件内容如下：
<public:component>
<public:attach event="onmouseover" onevent="buttononmouseover()" />
<public:attach event="onmouseout" onevent="buttononmousenormal()" />
<public:attach event="onmousedown" onevent="buttononmousedown()"/>
<public:attach event="onmouseup" onevent="buttononmousenormal()"/>
<script language="javascript">
function buttononmouseover(){
showmouseover(this.style);
}
function buttononmousedown(){
showmousedown(this.style);
}
function buttononmousenormal(){
shownormal(this.style);
}
function showmouseover(elstyle){
elstyle.borderleft = "1px solid buttonhighlight";
elstyle.borderright = "1px solid buttonshadow";
elstyle.bordertop = "1px solid buttonhighlight";
elstyle.borderbottom = "1px solid buttonshadow";
elstyle.paddingtop = "1px";
elstyle.paddingleft = "2px";
elstyle.paddingbottom = "1px";
elstyle.paddingright = "0px";
}
function showmousedown(elstyle){
elstyle.borderleft = "1px solid buttonshadow";
elstyle.borderright = "1px solid buttonhighlight";
elstyle.bordertop = "1px solid buttonshadow";
elstyle.borderbottom = "1px solid buttonhighlight";
elstyle.paddingtop = "1px";
elstyle.paddingleft = "2px";
elstyle.paddingbottom = "1px";
elstyle.paddingright = "0px";
}
function shownormal(elstyle){
elstyle.border = "1px solid buttonface";
elstyle.paddingtop = "0px";
elstyle.paddingleft = "1px";
elstyle.paddingbottom = "2px";
elstyle.paddingright = "1px";
}
</script>
</public:component>
我们可以使用下面的方法将该行为附加到指定的控件上：
yourcontrol ctl = (yourcontrol)button;
ctl.style.add("behavior","url(powerbutton.htc)");
嘿嘿！都是些小技巧，有不对之处请多指教。谢谢！上面的立体datagrid的实现参考了灰豆宝宝的《实现立体表格》。
