在前边有两篇文章提起过如何修改dnn的某些控件以达到客户的需求,对此我似乎还意犹未尽，故此再贡献一下自己曾经改造的一个实例，希望大家对dnn有更深入的了解及其研究 ^_^
现在web 2.0的概念笼罩着整个互联网, 一些很时髦的概念不断的脱颖而出, 对此我无权去评论什么, 也许只有追捧的份，故而我有时还是很欣赏一些web 2.0的网站，包括一些界面元素的设计, 比如一些链接，按钮等等。说到这，就顺便给大家推荐一链接，这篇文章主要展示一些web 2.0概念下的按钮的设计:
这些都是圆角的按钮,我觉得其吸引力是不言而喻的。而一般都会在左侧增加某一图标(icon)，类似:
那我们在dnn能不能做到呢，我想大家都会说怎么会不能，不就是一个图片么？可其实我想说我们可不可以做一个比较有通用型的圆角按钮，也就是说我们只有样式是不变的，其对应的Text可以随意变换。我想你们也会说这也不难实现，无非就是使用一下(sliding doors technique)滑动门技术什么就可以实现了，是的，不错我们就是要使用滑动门技术来实现这一通用的按钮样式，但是我们希望的是我们可以直接使用现成控件。那有没有呢，Button? LinkButton?ImageButton?这些实现起来也是可以，但是比较麻烦而且不是很通用。当初我也就是在考虑这个问题时,突然想起了dnn默认自带的CommandButton,我想也许这就是我们所要的。如果你还不是明白我指的是什么，你不妨去Host Setting页面看看,其更新和重新启动网站这两按钮就是使用CommandButton.仔细看看生成的源代码:
<span id="dnn_ctr327_HostSettings_cmdRestart" class="CommandButton">
<input type="image" name="dnn$ctr327$HostSettings$ctl223" title="重新启动网站" src="/images/reset.gif" alt="重新启动网站" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("dnn$ctr327$HostSettings$ctl223", "", true, "", "", false, false))" style="border-width:0px;" />
<a class="CommandButton" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("dnn$ctr327$HostSettings$ctl224", "", true, "", "", false, true))">重新启动网站</a></span>
看到上边的代码，只要你稍微知道一些CSS知识的话，我想你能看出来这就可以利用滑动门技术来实现圆角按钮的效果了。那我们就开始来改造一下CommandButton吧，最终的效果如下:
在改造之前还是按照惯例我们先来看看CommandButton到底有哪些属性我们可以利用的:
由上图我们可以开始设计我们的NiftyCornerButton了，主要需要设置就是imageurl, CssClass(我想其它属性只要开发过dnn都会比较熟悉),这里我们有什么需要设置CssClass,因为CommandButton默认有CSS类，我们需要覆盖故设置该属性.先来看看页面元素:
<%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls"%>
<dnn:commandbutton id="btnReview" runat="server" imageurl="~/images/Reviewed.gif" Visible="false" causesvalidation="False" DisplayLink="true" CssClass="NiftyCorner_button" Text="Review Questions" ResourceKey="btnReview"/>
接下来就是通过CSS来控制其显示外观了:
.NiftyCorner_button A
{
float:left;
background:url(images/btn_right.gif) no-repeat right top;
margin-left:5px;
text-decoration:none;
/*border:solid 1px #000;*/
font-weight:bold;
font-size:0.8em;
height:27px;
margin-top:-18px;
padding-top:14px;
padding-right:12px;
}
span.NiftyCorner_button{
float:left;
display:block;
background:url(images/btn_left.gif) no-repeat left top;
/*border:solid 1px #000;*/
height:42px;
}
.NiftyCorner_button input
{
padding-top:12px;
padding-left:12px;
float:left;
}
到此改造就算基本结束，其实很简单，关键就是你要深入了解控件的属性，最后要提起的是CommandButton具有其它控件类型的事件，也就是以往其它Button能做到的事情它也应该可以做到。还要补充一点的是，你可以根据这个例子作出自己的样式，也许css定义得更合理些，毕竟我也不是很专业，在此只是给大家一个参考.