自己写的一个按钮控件,点击时在界面出现一个loading遮罩层

Imports System.Collections.Generic Imports System.ComponentModel Imports System.Text Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls Namespace Web.Controls ''' <summary> ''' Represents a button to prevent duplicate submissions. ''' When the user clicks the button after the button is grayed out, can not click again until reload the page or jump. ''' </summary> <DefaultProperty("Text")> _ <ToolboxData("<{0}:ClickOnceButton runat=server></{0}:ClickOnceButton>")> _ Public Class ClickOnceButton Inherits System.Web.UI.WebControls.Button ''' <summary> ''' The default constructor. ''' </summary> Public Sub New() Me.ViewState("afterSubmitText") = "Submitting, please wait ..." MyBase.Text = "ClickOnceButton" Me.ViewState("showMessageBox") = False Me.ViewState("showLoadingLayer") = False Me.ViewState("warningText") = "Sure to submit it?" End Sub ''' <summary> ''' Gets or sets the click of a button, the button on the display text. ''' </summary> <Bindable(True), Category("Appearance"), DefaultValue("Submitting, please wait ..."), Description("After the submission instructions click the button on the display text.")> _ Public Property AfterSubmitText() As String Get Dim afterSubmitText__1 As String = DirectCast(Me.ViewState("afterSubmitText"), String) If afterSubmitText__1 IsNot Nothing Then Return afterSubmitText__1 Else Return String.Empty End If End Get Set(ByVal value As String) Me.ViewState("afterSubmitText") = value End Set End Property <Bindable(True), Category("Appearance"), DefaultValue(False), Description("Indicates whether to display a prompt box.")> _ Public Property ShowLoadingLayer() As Boolean Get Return CBool(Me.ViewState("showLoadingLayer")) End Get Set(ByVal value As Boolean) Me.ViewState("showLoadingLayer") = value End Set End Property <Bindable(True), Category("Appearance"), DefaultValue(False), Description("Indicates whether to display a prompt box.")> _ Public Property ShowMessageBox() As Boolean Get Return CBool(Me.ViewState("showMessageBox")) End Get Set(ByVal value As Boolean) Me.ViewState("showMessageBox") = value End Set End Property <Bindable(True), Category("Appearance"), DefaultValue("Sure to submit it?"), Description("Instructions contained in the contents of the prompt box.")> _ Public Property WarningText() As String Get Return DirectCast(Me.ViewState("warningText"), String) End Get Set(ByVal value As String) Me.ViewState("warningText") = value End Set End Property ''' <summary> ''' AddAttributesToRender ''' </summary> ''' <param name="writer">HtmlTextWriter</param> Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter) Dim ClientSideEventReference As New System.Text.StringBuilder() If ((Me.Page IsNot Nothing) AndAlso Me.CausesValidation) AndAlso (Me.Page.Validators.Count > 0) Then ClientSideEventReference.Append("if (typeof(Page_ClientValidate) == 'function'){if (Page_ClientValidate() == false){return false;}}") End If 'ShowMessageBox? If Me.ShowMessageBox Then ClientSideEventReference.Append("if (!confirm('" & Me.WarningText & "')){return false}") End If If Me.ShowLoadingLayer Then ClientSideEventReference.Append("var objImg = document.createElement(""IMG"");") ClientSideEventReference.Append("objImg.src= ""Images/LoadingContent.gif"";") ClientSideEventReference.Append("var iMsk = document.createElement(""div"");") ClientSideEventReference.Append("document.body.appendChild(iMsk);") ClientSideEventReference.Append("iMsk.id = ""mask"";") ClientSideEventReference.Append("iMsk.style.position = ""absolute"";") ClientSideEventReference.Append("iMsk.style.zIndex = ""1"";") ClientSideEventReference.Append("iMsk.style.width = ""100%"";") ClientSideEventReference.Append("iMsk.style.height = ""100%"";") ClientSideEventReference.Append("iMsk.style.align = ""center"";") ClientSideEventReference.Append("iMsk.style.top = ""0px"";") ClientSideEventReference.Append("iMsk.style.left = ""0px"";") ClientSideEventReference.Append("iMsk.style.background = ""#000"";") ClientSideEventReference.Append("iMsk.style.filter = ""alpha(opacity=30)"";") ClientSideEventReference.Append("iMsk.style.opacity = ""0.30"";") ClientSideEventReference.Append("iMsk.appendChild(objImg);") ClientSideEventReference.Append("var height = document.body.scrollHeight;") ClientSideEventReference.Append("var width = document.body.scrollWidth;") ClientSideEventReference.Append("if(objImg.readystate=""complete""){") ClientSideEventReference.Append("objImg.style.marginTop = (height - objImg.offsetHeight) / 2 + ""px"";") ClientSideEventReference.Append("objImg.style.marginLeft = (width - objImg.offsetWidth) / 2 + ""px"";") ClientSideEventReference.Append("}") ClientSideEventReference.Append("objImg.style.position = ""absolute"";") End If ClientSideEventReference.AppendFormat("this.value = '{0}';", DirectCast(Me.ViewState("afterSubmitText"), String)) ClientSideEventReference.Append("this.disabled = true;") ClientSideEventReference.Append(Me.Page.ClientScript.GetPostBackEventReference(Me, String.Empty)) writer.AddAttribute(HtmlTextWriterAttribute.Onclick, ClientSideEventReference.ToString(), True) MyBase.AddAttributesToRender(writer) End Sub End Class End Namespace

 

ClientSideEventReference.Append("objImg.src= ""Images/LoadingContent.gif"";")

这句是直接取的网站根目录下Images文件夹的loading gif 图片

这个控件是根据网上别人写的单次点击按钮修改的,功能更实用

单次点击按钮的功能是，在点提交时，按钮变灰，防止用户在提交未完成时，重复点击。但是这个

控件的缺陷也是显而易见的。用户不点击该按钮，但还是可以点击界面上的其它控件，所以最彻底

的办法的就是，弹出一个遮罩层，彻底隔绝用户对界面的操作

 

这里面有一个细节要注意，动态创建一个img元素以后，要判断它的size，必须要等它加载完毕,也就是图

片加载完毕

if(objImg.readystate="complete" { //在这里才可获取img的size }