进度条的实现

来源：互联网发布：淘宝卖家图片处理软件编辑：程序博客网时间：2024/05/22 01:36

在工作中平台提供了兼容现代浏览器的SubmitButton，这个控件基于Bootstrap的样式重新调整了界面，以及调整了兼容性问题，以便支持最新版浏览器。如下：

一、代码分享

由于这是公司封装的控件，所以这里就简单的说一下：

（一）前台页面

<headrunat="server">    <title>SubmitButtonTest</title>    <scripttype="text/javascript">        function test() {            alert();        }         function fefefefe() {           document.getElementById("submitBtn").click();        }    </script></head><body>    <form id="serverForm"runat="server">    <asp:ScriptManagerID="ScriptManager1" runat="server">    </asp:ScriptManager>    <h1>        标题</h1>    <div>        <a runat="server"href="#" id="relSubmit" onclick="event.returnValue =!event.srcElement.disabled;">            提交按钮的相关控件</a>        <input id="fefefe"value="我做测试" onclick="fefefefe()" type="button"/>        <HB:SubmitButtonrunat="server" ID="submitBtn" Text="SubmitButton" PopupCaption="正在提交..."            OnClick="submitBtn_Click"OnClientClick="test()" />        <HB:SubmitButtonrunat="server" ID="saveBtn" Text="Save Button"PopupCaption="正在保存..."            OnClick="submitBtn_Click"/>        <HB:SubmitButtonrunat="server" ID="SubmitButton1" Text="Long Term SaveButton" ProgressInterval="00:00:00.400"PopupCaption="这个等候时间比较长..."           OnClick="SubmitButton1_Click" />    </div>    <br />    <div>        <scripttype="text/javascript">           //在UpdatePanel更新完毕后执行指定的方法，重置SubmitButton的状态           Sys.WebForms.PageRequestManager.getInstance().add_endRequest(blah);            function blah() {                SubmitButton.resetAllStates();            }        </script>        <HB:SubmitButtonrunat="server" ID="SubmitButton2" Text="查询"PopupCaption="查询中。。。"           OnClick="SubmitButton2_Click" />        <asp:UpdatePanelID="UpdatePanel1" runat="server">            <ContentTemplate>                <div>                    <asp:TextBoxrunat="server" ID="tbx_msg"></asp:TextBox>                </div>            </ContentTemplate>            <Triggers>                <asp:AsyncPostBackTriggerControlID="SubmitButton2" EventName="Click" />            </Triggers>        </asp:UpdatePanel>    </div>    </form></body>

（二）后台代码

publicpartial class SubmitButtonTestForm : System.Web.UI.Page{protectedvoid submitBtn_Click(object sender, EventArgs e){Thread.Sleep(5000);}         protected voidSubmitButton2_Click(object sender, EventArgs e)        {            Thread.Sleep(2000);            tbx_msg.Text = "查询结果";            this.SubmitButton2.PopupCaption ="";        } protectedvoid SubmitButton1_Click(object sender, EventArgs e){Thread.Sleep(10000);}}

二、功能

那么接下来就和大家分享一下它有什么强大的功能吧！

这个控件分为客户端和服务器端两部分。服务器端通过RelativeControlID可以和一个Button或LinkButton挂接。再通过客户端的脚本控制，一旦点击一个Button，其它相关的SubmitButton都是disable的。

我们需要实现的功能集合和原来的没有什么差别，主要功能点包括：

这个控件本身是一个Button，同时也可以通过指定RelativeControlID，点击别的Button、Anchor等元素，弹出进度条

页面出现滚动条时，弹出的进度条应该在页面中央

可以通过客户端的脚本弹出或关闭进度条

可以在UpdatePanel中使用（主要是在提交完成后，响应UpdatePanel客户端的事件后，自动关闭）

支持两种显示进度条的模式（枚举为SubmitButtonProgressMode）。其中ByTimeInterval是按照时间间隔；BySteps是真实的进度，通过设置MaxStep、MinStep等属性，以及通过服务器端的ProcessProgress对象来控制进度。

三、总结

以上就是对进度条的简单讲解，有时间会将它和Bootstrap的样式进行对比分析，这样让自己能够更好的了解其本质是什么？

0 0