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
精彩评论