Jquery弹出层BlockUI的用法(BlockUI是个插件)

例子一:
<head runat="server">
     <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI();
                 setTimeout($.unblockUI, 2000);
             });
         });
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="btnOpen" type="button" value="Open" />
     </div>
     </form>
</body>
</html>
 
例子二:
<head runat="server">
     <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI({
                     message:"请稍候",
                     css: {
                     border: 'none',
                     padding: '15px',
                     backgroundColor: 'yellow',
                     width:"300px",
                     opacity: .5,
                     color: 'Red'
                    }
                 });
                 setTimeout($.unblockUI, 2000);
             });
         });
 
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
     <input id="btnOpen" type="button" value="Open" />
     </div>
     </form>
</body>
</html>
 
例子三:
<head runat="server">
     <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI({
                     message: '<image src="images/wait.gif"></image>',
                     css: {
                         border: 'none',                   // 无边界
                         width:"20px",                     // 中间框框的宽度
                         top:"50%",                        // 高居中
                         left:"50%"                        // 左居中
                    }
                 });
                 setTimeout($.unblockUI, 2000);
             });
         });
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="btnOpen" type="button" value="Open"/>
     </div>
     </form>
</body>
</html>
 
例子四:
<head runat="server">
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI({
                     message: $('#loginForm')
                 });
             });
             $('#btnReset').click(function () {
                 $.unblockUI();
             });
             $('#btnLogin').click(function () {
                location.href ="default.aspx";
             });
         });
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="btnOpen" type="button" value="Open"/>
         <div id="loginForm" style="display:none; cursor:default">
             <table style="text-align:right">
                 <tr>
                     <td colspan="2">用户名:<input id="txtUserName" type="text" /></td>
                 </tr>
                  <tr>
                     <td colspan="2">密码:<input id="Text1" type="text" /></td>
                 </tr>
                 <tr style="text-align:center">
                     <td>
                         <asp:Button ID="btnLogin" runat="server" Text="登陆" />
                    </td>
                     <td>
                         <input id="btnReset" type="reset" value="取消登陆" />
                     </td>
                 </tr>
             </table>
         </div>
     </div>
     </form>
</body>
</html>
 
 
例子五:
            // 当有ajax请求时,当加载信息较慢时,会显示该等待图片,带来良好的用户体验
             $(document).ajaxStart(function () {
                 $.blockUI({
                     message: '<image src="images/wait.gif"></image>',
                     css: {
                         width: "20px",   // 宽度小一点
                         top: "50%",
                         left: "50%"
                     }
                 });
             });
             $(document).ajaxStop(function () {
                 // 直接调用,无延时
                 $.unblockUI();
             });

你可能感兴趣的:(jquery,blockUI)