65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 中创建自定义鼠标悬停按钮

Prosanta Kundu 在线
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.29/5 (9投票s)

2010 年 1 月 21 日

CPOL

1分钟阅读

viewsIcon

29536

downloadIcon

430

在 ASP.NET 中创建自定义鼠标悬停按钮。

btn.JPG

引言

本文档介绍了如何在 ASP.NET 中创建一个简单的鼠标悬停按钮控件，该控件可以在不同的页面中使用。

背景

在开发一个 ASP.NET 项目时，我的需求是在我的应用程序中创建一个鼠标悬停按钮。然后，我在 Google 上搜索解决方案，并找到了网络上可用的各种按钮悬停教程，有些使用 JavaScript，有些使用 CSS。我随后决定创建我自己的鼠标悬停按钮服务器控件。

基本上，此控件扩展了 ASP.NET Button 并将按钮渲染在一个表格内。该表格包含三个单元格。第一个单元格渲染左侧圆角，第二个单元格包含按钮，最后一个单元格渲染右侧圆角图像。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)]

    public class CustomButton : Button

属性

此控件有两个自定义属性：ShowImage 和 ImageURL。

[Bindable(true)]
[Category("Appearance")]
[Description("ShowImage")]
[DefaultValue(false)]
public bool ShowImage { get; set; }


[DefaultValue("")]
[Browsable(true)]        
[UrlProperty]
public string ImageUrl
{
    get
    {
        return imgURL;
    }
    set
    {
        imgURL = value;
    }
}

ShowImage 确定是否应与按钮文本一起显示任何图标。如果 ShowImage 为 true，则它将使用 ImageUrl 值在按钮中渲染图像。

最后，Render 方法将 HTML 渲染到浏览器。

protected override void 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();
}

使用代码

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

在 ASPX 页面中，注册控件

<%@ Register  Namespace="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)}
    .imgBtnWrapperStd td.btnContainer, .imgBtnWrapperStd  input.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:hover input.imgBtnStd{
      background:transparent url(Images/Std_hover.gif) repeat-x}
    .imgBtnWrapperStd:active input.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:CustomButton ID="btn" runat="server" Text="Custom Button" onclick="btn_Click"  />
© . All rights reserved.