第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

Ajax UpdateProgress功能演示

標(biāo)簽:
JavaScript


此功能,使用到Ajax技术UpdateProgress来实现层遮罩效果,从下面的Style可以看到两个样式,一个底层和显法层。

5acf07390001405b00110016.jpgStyle <style>
        #progressBackgroundLayer
        {
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            overflow: hidden;
            padding: 0;
            margin: 0;
            background-color: #000;
            filter: alpha(opacity=30);
            opacity: 0.5;
            z-index: 1000;
        }
        
        #processMessageLayer
        {
            position: fixed;
            text-align: center;
            width: 15%;
            border: none;
            padding: 5px;
            background-color: #fff;
            vertical-align: middle;
            z-index: 1001;
            top: 20%;
            left: 4%;
        }
    </style>

 

接下来,还再实现一个取消功能:

5acf07390001405b00110016.jpgCancelPostBack <script type="text/JavaScript" language="JavaScript">

        function CancelPostBack() {
            var objMan = Sys.WebForms.PageRequestManager.getInstance();
            if (objMan.get_isInAsyncPostBack())
                objMan.abortPostBack();
        }

    </script>

 

.aspx

页面中写上ScriptManager,UpdatePanel和主角UpdateProgress:

5acf07390001405b00110016.jpgView Code  <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="UpdateProgressDemo" 
                onclick="Button1_Click" />
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
                DisplayAfter="100" DynamicLayout="true">
                <ProgressTemplate>
                    <div id="progressBackgroundLayer">
                    </div>
                    <div id="processMessageLayer">
                        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Ajax_Load.gif" alt="Progress" align="absmiddle" />
                        Please wait...<br />
                        <input type="button" onclick="CancelPostBack()" value="Cancel" />
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </ContentTemplate>
    </asp:UpdatePanel>

 

为了效果,Insus.NET故意在Button1_Click把进行时间写长了一点:

System.Threading.Thread.Sleep(5000);

 

完整代码:

http://download.cnblogs.com/insus/Ajax/UpdateProgressDemo.rar

 

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫(xiě)下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消