下文將為您演示如何將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的實現參考了灰豆寶寶的《實現立體表格》。
