在 ASP.NET 中,创建自定义翻转按钮

分享于 

7分钟阅读

Web开发

  繁體

 btn.jpg

介绍

本文提供了如何在 ASP.NET 中创建一个简单的翻转按钮控件,该控件可以在不同的页面中使用。

背景

在使用 ASP.NET 项目时,我的要求是在我的应用程序中创建一个翻转按钮。 然后,我在Google中搜索了一个解决方案,找到了不同的按钮翻转教程。 然后我决定创建一个翻转按钮服务器控制我自己的。

控件基本上扩展了 ASP.NET Button,并将按钮 inside 呈现为 table。 table 包含三个单元格。 第一个单元格呈现左圆角,第二个单元格包含该按钮,最后一个单元格呈现右圆角图像。 CSS类用于显示翻转功能。

CustomButton 类是在 Web.CustomControls 命名空间下定义的,并且扩展了 System.Web.UI.WebControls.Button 类。

namespace Web.CustomControls
{
 [
 AspNetHostingPermission(SecurityAction.Demand,
 Level = AspNetHostingPermissionLevel.Minimal),
 AspNetHostingPermission(SecurityAction.InheritanceDemand,
 Level = AspNetHostingPermissionLevel.Minimal),
 DefaultProperty("Text"),
 ToolboxData("<{0}:CustomButton runat="""server"> </{0}:CustomButton>")
 ]
 [SecurityPermissionAttribute(SecurityAction.Demand, 
 Flags = SecurityPermissionFlag.UnmanagedCode)]
 publicclass CustomButton : Button

属性

这里控件有两个自定义属性: ShowImageImageURL

[Bindable(true)][Category("Appearance")]
[Description("ShowImage")]
[DefaultValue(false)]publicbool ShowImage { get; set; }
[DefaultValue("")]
[Browsable(true)] 
[UrlProperty]publicstring ImageUrl
{
 get {
 return imgURL;
 }
 set {
 imgURL = value;
 }
}

ShowImage 确定是否有任何 icon 要与按钮文本一起显示。 如果 ShowImagetrue ,然后使用 ImageURL 值在按钮中呈现一个图像。

最后,Render 方法将HTML呈现给浏览器。

protectedoverridevoid Render(HtmlTextWriter writer)
{
 writer.AddAttribute(HtmlTextWriterAttribute.Id, 
 String.Format("tbl{0}", this.ID));
 writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "0");
 writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "0");
 writer.AddAttribute(HtmlTextWriterAttribute.Border, "0");
 writer.AddAttribute(HtmlTextWriterAttribute.Class, "imgBtnWrapperStd");
 if (!this.Enabled)
 writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled");
 writer.RenderBeginTag(HtmlTextWriterTag.Table);
 writer.RenderBeginTag(HtmlTextWriterTag.Tr);
 writer.AddAttribute(HtmlTextWriterAttribute.Class, "imgBtnLeftStd");
 writer.RenderBeginTag(HtmlTextWriterTag.Td);
 writer.RenderEndTag();
 writer.AddAttribute(HtmlTextWriterAttribute.Class, "btnContainer");
 writer.RenderBeginTag(HtmlTextWriterTag.Td);
 if (this.ShowImage)
 {
 writer.AddAttribute(HtmlTextWriterAttribute.Src, 
 ResolveClientUrl(this.ImageUrl));
 writer.AddAttribute(HtmlTextWriterAttribute.Align, "absMiddle");
 writer.RenderBeginTag(HtmlTextWriterTag.Img);
 writer.RenderEndTag();
 }
 writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "0px");
 writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, 
 "transparent");
 writer.AddStyleAttribute(HtmlTextWriterStyle.FontFamily, 
 "tahoma,arial,sans-serif");
 writer.AddStyleAttribute(HtmlTextWriterStyle.FontSize, "10pt");
 writer.AddStyleAttribute(HtmlTextWriterStyle.Color, "#FFF");
 writer.AddStyleAttribute(HtmlTextWriterStyle.FontWeight, "bold");
 writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "19px");
 writer.AddAttribute(HtmlTextWriterAttribute.Class, "imgBtnStd");
 base.Render(writer);
 writer.RenderEndTag();
 writer.AddAttribute(HtmlTextWriterAttribute.Class, "imgBtnRightStd");
 writer.RenderBeginTag(HtmlTextWriterTag.Td);
 writer.RenderEndTag();
 writer.RenderEndTag();
 writer.RenderEndTag();
}

使用代码

通过创建单独的库并在应用程序中引用它,或者将类放在你的App_Code 文件夹中,可以使用这个。 这里,我将讨论第二种方法。

在ASPX页中,register 控件:

<%@RegisterNamespace="Web.CustomControls"TagPrefix="cc1"%>

在页面中添加以下样式标记,或者你可以创建一个单独的样式表。

<head>
 <title></title><style type="text/css">
. imgBtnWrapperStd{height:19px;margin:0;padding:0}.imgBtnLeftStd{background:transparent url(
 Images/Std_normal_left.gif) no-repeat;height:19px;width:4px}.imgBtnRightStd{background:transparent url(
 Images/Std_normal_right.gif) no-repeat;height:19px;width:4px}.imgBtnWrapperStd:hover. imgBtnLeftStd{
 background-image:url(Images/Std_hover_left.gif)}.imgBtnWrapperStd:hover. imgBtnRightStd{
 background-image:url(Images/Std_hover_right.gif)}.imgBtnWrapperStd:active. imgBtnLeftStd{
 background-image:url(Images/Std_active_left.gif)}.imgBtnWrapperStd:active. imgBtnRightStd{
 background-image:url(Images/Std_active_right.gif)}.imgBtnWrapperStdtd.btnContainer,. imgBtnWrapperStdinput.imgBtnStd{background:transparent url(Images/Std_normal.gif) repeat-x;font-family:tahoma,arial,sans-serif;color:#FFF;font-weight:bold;height:19px;font-size:10px;outline:none;cursor:pointer}.imgBtnWrapperStd:hoverinput.imgBtnStd{
 background:transparent url(Images/Std_hover.gif) repeat-x}.imgBtnWrapperStd:activeinput.imgBtnStd{
 background:transparent url(Images/Std_active.gif) 
 repeat-x;outline:none}.imgBtnWrapperStd[disabled] 
. imgBtnLeftStd{background-image:url(Images/Std_disabled_left.gif)}.imgBtnWrapperStd[disabled] 
. imgBtnRightStd{background-image:url(Images/Std_disabled_right.gif)}.imgBtnWrapperStd[disabled] input.imgBtnStd, 
. imgBtnWrapperStd[disabled]:hover input.imgBtnStd{background:transparent url(Images/Std_disabled.gif) repeat-x;color:#ACA899;cursor:default} </style></head>

最后,使用显示按钮的代码:

<cc1:CustomButtonID="btn"runat="server"Text="Custom Button"onclick="btn_Click"/>

asp  asp-net  按钮  Rollover  
相关文章