开发者

extending asp.net ImageButton to css Sprite

I'm updating my ImageButtons on my asp.net application to a WebControl that extends the ImageButton, which I called CSSImageButton. I've overridden the render methods so I can make them work with css sprites. I've managed to get the OnClick working and the OnClientClick. But some buttons have the OnCommand, and I can't figure out what to do.

 public class CSSImageButton : ImageButton
{
    public string DivClass { get; set; }


    public CSSImageButton()
    {
        CssClass = "";
    }

    protected override void Render(HtmlTextWriter writer)
    {
        base.Render(w开发者_运维问答riter);
    }

    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.Write("<div class=\"" + CssClass + " " + DivClass + "\">");
    }


    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write("<a id=\"" + this.ClientID + "\" title=\""+ this.ToolTip+"\"");
        if (!String.IsNullOrEmpty(OnClientClick))
        {
            writer.Write(" href=\"javascript:void(0);\" OnClick = \"" + OnClientClick + "\"");
        }
        else
        {
            writer.Write(" href=\"javascript:" + this.Page.GetPostBackEventReference(this, "ButtonClick") + "\"");
        }
        writer.Write("\"></a>");
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
        writer.Write("</div>");
    }

}


Alternatively, you can replace ImageButton with LinkButton, and have a div inside of it with proper class for css-sprites

The Source


In the property ImageUrl of your ImageButton, you could place a link to a transparent image (which has a size of 1x1 pixel, for example: spacer.png). Then in your CSS you place a background image on it, with a width and height.

So at any place where you use an ImageButton, you call the same transparent image (which remain in the browsers cache).


@roman m: The issue with this approach (depending on your situation), is that this will end up nesting a div within an anchor ("bar") which will not pass HTML validation.

Granted, if that is not a concern, then what you suggest will solve the problem, however Etienne's solution is more "natural" from a markup / validation perspective.

Just my $.02

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜