自己写的一个按钮控件,点击时在界面出现一个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 }
相关文章推荐
- 写一个方法进行各种属性的更新,而不要每个界面设置改变都改变一个属性。就是点击应用或确定按钮时调用这个更新属性的方法,遍历所有(控制对象属性的)界面控件的状态(值),进行属性修改和刷新。
- 在一个Android界面弹出一个dialog或者FrameLayout,出现可以点击被覆盖界面的控件,原因是没有消费触摸事件。
- 一个界面,有多个UITextField的时候,点击提交按钮发送数据时,取消键盘
- ASP.NET 当前界面弹出另一个界面后,点击弹出界面的按钮又重新生成一个弹出界面的解决办法。。
- 在Fragment中点击退出按钮,退出到登录界面后(按返回键退出程序开始的时候,退出到登录界面按返回键无法退出程序,而是返回到上一个Activity,网上说是没有finish掉上一个Activity)
- iOS 点击按钮出现一个下拉列表
- 17-Android界面控件之Button,点击Button然后出现提示信息
- IOS下点击按钮后退到上一个界面
- 一个点击屏幕出现侧边栏,点击里面的按钮进入下一个页面的Demo
- 一个个性化的点击以后可以变成Loading的按钮
- 一个简单的PopupWindow做的选项菜单点击按钮会在按钮下弹出几个下拉控件
- 实现在html上点击一个按钮出现一张照片
- 一个aspx页面有2个按钮,都是服务器控件,服务器上的DLL如何知道用户点击了哪个按钮,从而按钮的事件函数被调用
- 登录按钮点击之后本页出现一个小的页面,类似于弹窗
- 点击一个按钮,弹出框出现几秒钟之后,跳转到另一个页面
- 利用5个标签,4个文本框,2个按钮,自己设计布局实现输入三边求三角形面积。界面如下所示。三角形类的编写可以使用实验4中已经写过的三角形类,当点击“判断三边”时,若能构成三角形,在标签5上显示“可以构成三角形!”,如不能构成三角形,在标签5上显示“不能构成三
- 回到顶部,当页面下拉到一定高度时,就会出现回到顶部的按钮,点击回到顶部之后,会有一个速度的变化回滚到顶部,如果正在回到顶部时,鼠标的滚轮转动了就会停止回到顶部
- 如何用数据驱动实现通用化巡检APP(如何一个界面里添加多个点击拍照按钮并显示在不同的imageview里)
- 关于相同页面用一个页面实现,点击datalist中Button按钮出现“回发或回调参数无效......”
- 制作login.jsp页面,要求实现提供用户登陆的界面, 用户通过该界面输入用户名(控件名userName)和密码(控件名password), 然后点击“登录”按钮实现登陆操作.