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

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

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

解决网站搬家windows下解压图片文件名乱码问题的利器：Bandizip
很多时候我们备份网站需要把网站整站打包,大多数linux系统打包后默认的压缩格式是.zip结尾的.我们打包下载到本地,然后用winrar解压,会出现乱码,特别是图片: 图片乱码图片中的中文显示的是乱 ...
Linux 字体微调 - windows 效果版
2019独角兽企业重金招聘Python工程师标准>>> Linux 字体微调 - windows 效果版作者:quanliking 转载请注明:来自 http://www.linu ...
python绘制立体心形折纸图解_PS制作超漂亮的立体的心形折纸效果
今天为大家分享PS制作超漂亮的立体的心形折纸效果方法,教程难度不是很大,制作出来的折纸效果非常漂亮,好了,一起来学习吧! 背景选择灰色的渐变底如下新建一个图层,可以使用其他的图案或者图形但是 ...
windows默认的图片查看器打开JPG图片显示为空白，但全屏又能正常显示。
windows默认的图片查看器打开JPG图片显示为空白,但全屏又能正常显示. 打开注册表进入目录 hkey_classes_root\.jpg 修改默认值为jpegfile即可当遇到这类故障,我们 ...
怎么打开Windows Server 2008 图片预览的功能
打开一个文件夹,点击菜单中的"工具"->"文件夹选项",切换到"查看"选项卡,在高级设置中取消如下选项: "始终显示图标,从 ...
Windows系统SVG图片预览插件
由于工作中经常需要对组图查看和管理,而Windows系统不支持在文件夹下直接预览svg图片, HBuilderX 插件市场没有找到相应的svg插件,比较麻烦.经过查找,发现svg扩展插件(SVG Vi ...
[ Windows 10 ] 任务栏按钮不显示正在打开的窗口了(打开任何程序任务栏图标按钮都不显示)
文章目录问题描述原因分析解决办法问题描述系统是Windows 10 professional版本,在一次突然开机后,发现点开程序后,在任务栏什么都不显示,任务栏按钮和图标状态均不显示了,但是 ...
Windows遇到的图片查看问题。
解决windows照片查看器打不开图片,可能由于内存不足的问题. 问题显示如图问题原因: 可能是由于windows照片查看器识别处理不了该图片的颜色. 解决方案: 控制面板–>查看方式:小图标 ...
Windows下安装图片标注工具LabelImg遇到的问题及解决办法
个人用的是windows系统,由于在windows系统下采取了好几种的安装方案,本着个人的喜好,选择了第一种安装方法由上图可以看到,其实安装方案也比较简单,自己仅需要安装两个包, pip insta ...

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

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

最新文章

热门文章