当前位置：首页 > 编程日记 > 正文

如何实现立体的DataGrid和具有Windows效果的图片按钮

编程日记 2024-11-24 11:00:00

作者： cuike519的专栏 http://blog.csdn.net/cuike519/

下文将为您演示如何将DataGrid实现为一个立体的表格，以及如何实现在Image按钮中实现立体感的效果。为了完成上面的内容我们首先要对CSS的自定义样式有所了解，然后就是一些简单的js代码。

为了实现立体大DataGrid我们需要创建一个工程，里面有一个DataGrid以及绑定在其上的数据，代码如下：

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

</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代码如下所示：

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">

</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()"/>

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的实现参考了灰豆宝宝的《实现立体表格》。

https://www.dkcj.cn/info/28900.html

如何实现立体的DataGrid和具有Windows效果的图片按钮

相关文章：

用 Python 详解《英雄联盟》游戏取胜的重要因素！

用户输入一个数字，找到所有能够除尽它的数的总个数

如何在DataGrid里面使用动态图形表示数字

替换 RHEL5的yum源为CentOS5源，亲测线上系统可用

如何使用 Python 构建推荐引擎？

LVM 类型的 Storage Pool - 每天5分钟玩转 OpenStack（8）

.NET中的密码学--对称加密

哪种编程语言最适合初学者？

地址本在不同手机间的迁移

关于flume配置加载（二）

为什么深度神经网络这么难训练？| 赠书

dhcp 搭建

锦上添花DataGrid！

linux服务器优化1.0版

给DataGrid添加确定删除的功能

操纵神经元构造后门，腾讯朱雀实验室披露AI模型新型攻击手法

工程师进阶之路（四）

Hadoop API文档地址

两个FTP对传文件

全国大学生数学建模竞赛中，哈工大被禁用MATLAB

JDK NIO编程

ASP.NET ViewState 初探

[emuch.net]MatrixComputations(1-6)

身为面向对象编程、移动计算机之父的他，为何说“计算机革命还没真正到来”？...

动态表单构建器——建造者模式

网页素材大宝库：50套非常精美的图标素材

AI 面试“泛滥”的时代，HR该如何甄别真假“AI”？

C语言里面%2d 意思

DatagridView自动充满屏幕，并能指定某列宽度

在网页中动态的生成一个gif图片