ExtendedImageButton：具有扩展功能的图像按钮，包括 - JavaScript 鼠标悬停效果、确认弹出框、禁用状态和 alt 标签

micahbowerbank

3.38/5 (7投票s)

2005年5月9日

1分钟阅读

43278

940

这是一个完全独立的图像按钮控件，使用后可以为设计者提供干净的三态鼠标悬停效果。该控件还包含可选的确认弹出框、alt 标签和禁用状态。该控件可以作为简单的链接（直接跳转到新页面），也可以使用其自定义事件来启动回发。

引言

我构建这个控件是为了让我的工作更轻松。我总是需要创建鼠标悬停图像和带有确认弹出框的按钮。我终于厌倦了处理所有的 JavaScript 代码片段。这个控件是解决我所有问题的方案。（希望也能解决您的问题；）。

特别说明：感谢 CodeProject 上的以下两篇文章。它们对我的帮助很大。（而且我还从中借鉴了部分 JavaScript 代码。）

使用代码

以下是使用该控件所需的代码示例。首先引用 CustomControls.dll，然后将其添加到您的工具箱。接下来，将一个新的 ExtendedImageButton 控件拖到页面上，然后设置您可能需要的属性/事件。

protected CustomControls.ExtendedImageButton eibPostBack;
private void Page_Load(object sender, System.EventArgs e) {
    this.eibPostBack.ButtonClick += 
          new System.EventHandler(this.eibPostBack_ButtonClick);
}
private void eibPostBack_ButtonClick(object sender, System.EventArgs e){
    Response.Write("Button Was Clicked");
}

ExtendedImageButtonControl

这是控件的主要代码。Render 方法被重写。代码创建了一个围绕 [<img>] 标签的 [<A>] 标签。必要的 JavaScript 代码在另一个方法中添加，我们稍后会回顾。

protected override void Render(HtmlTextWriter output) {
    if (this.Enabled){
        output.WriteBeginTag("A");
        if (_redirectURL != String.Empty)
            output.WriteAttribute("href", _redirectURL);
        else 
            output.WriteAttribute("href", "javascript:" + 
               this.Page.GetPostBackEventReference(this, "ButtonClick"));
        if (_confirmClick)
            output.WriteAttribute("onclick", 
                      "javascript:return __doConfirm(this);");
        output.Write(">");
    }

    output.WriteBeginTag("img");
    if ((!this.Enabled) && (_imageDisabled != String.Empty)){
        output.WriteAttribute("src", _imageDisabled);
    }else{
        output.WriteAttribute("src", _imageNormal);
    }
    output.WriteAttribute("name", this.UniqueID);

    if (! this.BorderWidth.IsEmpty)
        output.WriteAttribute("border", this.BorderWidth.ToString());
    else
        output.WriteAttribute("border", "0");
    if (! this.BorderColor.IsEmpty)
        output.WriteAttribute("bordercolor", 
                            this.BorderColor.ToArgb().ToString());
    if (this.Style.Count > 0) {
    IEnumerator keys = this.Style.Keys.GetEnumerator();
        string sStyles="";
        while (keys.MoveNext()) {
            sStyles += (string)keys.Current + ":" + 
               this.Style[(string)keys.Current ].ToString() + ";";
        }
        output.WriteAttribute("style", sStyles);
    }
    if (this.CssClass != String.Empty)
        output.WriteAttribute("class", this.CssClass);
    if (! this.Height.IsEmpty)
        output.WriteAttribute("Height", this.Height.ToString());
    if (! this.Width.IsEmpty)
        output.WriteAttribute("Width", this.Width.ToString());
    if (this._allText != String.Empty)
        output.WriteAttribute("alt", _allText);
    if (this.Enabled){
        if (this._imageOnMouseOver != String.Empty)
            output.WriteAttribute("OnMouseOver", "javascript:newRollOver('" + 
               this.UniqueID + "', '" + ImageOnMouseOver + "')");
        if (this._imageNormal != String.Empty)
            output.WriteAttribute("OnMouseOut", "javascript:newRollOver('" + 
               this.UniqueID + "', '" + ImageNormal + "')");
        if (this._imageOnMouseClick != String.Empty)
            output.WriteAttribute("OnMouseDown", "javascript:newRollOver('" + 
               this.UniqueID + "', '" + ImageOnMouseClick + "')");
    }
    output.Write("/>");

    if (this.Enabled){
        output.WriteEndTag("A");
    }
}

OnInit 方法被重写。此方法将必要的 JavaScript 方法添加到页面。

protected override void OnInit(EventArgs e){
    const string RegistrationNameImageSwap = 
                                      "ExtendedImageButton_JSwap";
    const string RegistrationNameConfirmMessage = 
                                     "ExtendedImageButton_JConfirm";
    if (!this.Page.IsClientScriptBlockRegistered(RegistrationNameImageSwap)){
        const string sJSwapCode = 
            "<script language='javascript' type='text/javascript'>" +
            "<!-- \n" + 
            "function newRollOver(targetDOMUrlName, URL) { \n" + 
            "//alert(targetDOMUrlName + ' ' + URL); \n " + 
            "var img=document.images; \n " + 
            "var i=0; \n " + 
            "for (i=0; i<img.length; i++) \n " + 
            "if (img[i].name == targetDOMUrlName) img[i].src = URL; \n " + 
            "} \n " + 
            "//-->\n " + 
            "</script>\n ";
        this.Page.RegisterClientScriptBlock(RegistrationNameImageSwap,
                                                             sJSwapCode);
    }
    
    if (_confirmClick) {
       if (! this.Page.IsClientScriptBlockRegistered(
                                            RegistrationNameConfirmMessage))
       {
          string sJSConfirmCode = 
                "<script language='javascript' type='text/javascript'>" +
                "<!-- \n" +
                "function __doConfirm(btnWaiter) { \n" +
                "if (confirm('" + _confirmMessage + "')) { \n" +
                "document.body.style.cursor=\"wait\"; \n" +
                "return true; \n" +
                "} return false; } \n" +
                "//--> \n" +
                "</script> \n";
          this.Page.RegisterClientScriptBlock(RegistrationNameConfirmMessage,
                                                              sJSConfirmCode);
       }
    }
}

未来计划

更强的健壮性。

历史

版本 1.0，2005 年 5 月。