作者:cuike519的专栏 http://blog.csdn.net/cuike519/ 运维
下文将为您演示如何将DataGrid实现为一个立体的表格,以及如何实现在Image按钮中实现立体感的效果。为了完成上面的内容我们首先要对CSS的自定义样式有所了解,然后就是一些简单的js代码。
为了实现立体大DataGrid我们需要创建一个工程,里面有一个DataGrid以及绑定在其上的数据,代码如下:
上面的代码中有一个地方非常重要,就是设置style的属性那里,记得一定要写成这样。有了这个数据网格以后我们需要写一个可以实现立体效果的css样式,CSS样式如下所示:
.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));
}
从代码中我们可以看到使用了自定义的样式,该样式使用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";
}
代码的细节我就不详细表述了,最后只要将上面的CSS应用在我们的DataGrid里面就可以实现立体的DataGrid效果。最终的DataGrid如下所示:
接下来是如何实现有立体效果的Image按钮,其实很简单就是实现一般Windows里面按钮的效果,打开Word将鼠标移动到工具条后你就可以看到该方法实现的效果。操作如下:你可以放一个ImageButton或者被浏览器最后解释成image的控件,为了实现这个效果我们需要下面的js脚本,但是由于我们想重用这个脚本所以我将它写到一个HTC文件中,文件内容如下:
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";
}
我们可以使用下面的方法将该行为附加到指定的控件上:
YourControl ctl = (YourControl)Button;
ctl.Style.Add("behavior","url(PowerButton.htc)");
嘿嘿!都是些小技巧,有不对之处请多指教。谢谢!上面的立体DataGrid的实现参考了灰豆宝宝的《实现立体表格》。
本文由来源 21aspnet,由 system_mush 整理编辑,其版权均为 21aspnet 所有,文章内容系作者个人观点,不代表 Java架构师必看 对观点赞同或支持。如需转载,请注明文章来源。