使用JQuery blockUI插件示例(加载数据时使用相当于updateprogress)

<%@ Page Language="C#" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%--引用JQ主函数--%>

<script src="JQuery/jquery.3.2.min.js" type="text/javascript"></script>

<%--需要引用插件js--%>

<script src="plugin/jquery.blockUI.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        //绑定click事件

        $('#demo1').click(function() {

            //显示的消息

            $.blockUI({ message: $('#loginForm') });

            //2秒后消失

            setTimeout($.unblockUI, 2000);

        });

    });



</script>

<script runat="server">

    

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id ="demo1" value="Load Data" type="button" />

        <div id="loginForm" style="display:none">Load Data...</div>

    </div>

    </form>

</body>

</html>



一个简单的demo

你可能感兴趣的:(progress)