您的位置:首页 > 其它

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

2011-03-16 13:45 423 查看
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
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐