ExtendedImageButton: 带有扩展功能,包括JavaScript滚动,确认弹出框,禁用状态和alt标签的图像按钮

分享于 

6分钟阅读

Web开发

  繁體

介绍

我做这个控制是为了让我的生活更轻松。 它缝起来像我总是在图像上创建滚动,按钮的确认弹出。 我对处理所有的JavaScript代码Fragment感到厌烦。 这个控制是我所有问题的一个解决方案。 ( 希望你的;)

特别说明:感谢以下两篇关于CodeProject的文章。 他们帮助了我很多。 ( 另外,我从它们中抽取了我的JavaScript

使用代码

下面是使用控件所需的代码示例。 首先引用 CustomControls.dll,,然后将它的添加到你的工具箱中。 接下来将 ExtendedImageButton 控件的新实例拖到页上,然后设置可能需要的属性/事件。

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

ExtendedImageButtonControl

这是控件的主要代码。 重写 Render 方法。 代码创建一个[ <> ] 标记环绕在[ 中 <> ] 标记这里时将在另一个方法中添加所需的JavaScript,我们将在一分钟内进行审核:

protectedoverridevoid 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方法添加到页面中:

protectedoverridevoid OnInit(EventArgs e){
 conststring RegistrationNameImageSwap = 
 "ExtendedImageButton_JSwap";
 conststring RegistrationNameConfirmMessage = 
 "ExtendedImageButton_JConfirm";
 if (!this.Page.IsClientScriptBlockRegistered(RegistrationNameImageSwap)){
 conststring 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年05月。

JAVA  Javascript  STA  ext  图像  FUNC