作者： cuike519的專欄?? http://blog.csdn.net/cuike519/

??? 下文將為您演示如何將DataGrid實現(xiàn)為一個立體的表格，以及如何實現(xiàn)在Image按鈕中實現(xiàn)立體感的效果。為了完成上面的內容我們首先要對CSS的自定義樣式有所了解，然后就是一些簡單的js代碼。

為了實現(xiàn)立體大DataGrid我們需要創(chuàng)建一個工程，里面有一個DataGrid以及綁定在其上的數(shù)據(jù)，代碼如下：

<asp:datagrid id="DataGrid1" runat="server" GridLines="Horizontal" style="BORDER-COLLAPSE:separate">

???????? <ItemStyle ></ItemStyle>

</asp:datagrid>

上面的代碼中有一個地方非常重要，就是設置style的屬性那里，記得一定要寫成這樣。有了這個數(shù)據(jù)網格以后我們需要寫一個可以實現(xiàn)立體效果的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來實現(xiàn)的，所以我們還要有下面的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>

代碼的細節(jié)我就不詳細表述了，最后只要將上面的CSS應用在我們的DataGrid里面就可以實現(xiàn)立體的DataGrid效果。最終的DataGrid如下所示：

<asp:datagrid id="DataGrid1" runat="server" CssClass="SolidDataGrid" GridLines="Horizontal" style="BORDER-COLLAPSE:separate">

?????? <ItemStyle CssClass="SolidDataGridItem"></ItemStyle>

</asp:datagrid>

?

接下來是如何實現(xiàn)有立體效果的Image按鈕，其實很簡單就是實現(xiàn)一般Windows里面按鈕的效果，打開Word將鼠標移動到工具條后你就可以看到該方法實現(xiàn)的效果。操作如下：你可以放一個ImageButton或者被瀏覽器最后解釋成image的控件，為了實現(xiàn)這個效果我們需要下面的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的實現(xiàn)參考了灰豆寶寶的《實現(xiàn)立體表格》。

總結

以上是生活随笔為你收集整理的如何实现立体的DataGrid和具有Windows效果的图片按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。