jquery.blockUI.js的使用示例时间：2022-10-26 18:22:00<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><mce:script language=javascript src="js/jquery.js" mce_src="js/jquery.js"></mce:script><mce:script language=javascript src="js/jquery.blockUI.js" mce_src="js/jquery.blockUI.js"></mce:script><mce:script language=javascript><!--$(function(){ //检测引入的jquery.js是否正确。 alert("jquery 没有问题！"); //默认样式 var a1 = $("a:eq(0)"); a1.click(function(){ a1.css("color","green"); $.blockUI(); }); //自定义内容 var a2 = $("a:eq(1)"); a2.click(function(){ $.blockUI({message:'正在处理，请等待...'}); }); //自定义样式 var a3 = $("a:eq(2)"); a3.click(function(){ $.blockUI({ css: { border:'solid green 2px', backgroundColor:'blue' } }); }); //蓝色背景 var a4 = $("a:eq(3)"); a4.click(function(){ $.blockUI({ overlayCSS:{backgroundColor:'blue'}, message:'正在处理，请等待。。。', css:{ backgroundColor:'#F0FF00', height:40 } }); }); //停滞2秒 var a5 = $("a:eq(4)"); a5.click(function(){ $.blockUI({message:'Processing...'}); setTimeout($.unblockUI,2000); }); //防止一个表单 var a6 = $("a:eq(5)"); a6.click(function(){ $.blockUI({message:$('#loginForm')}); }); //通知（Notification） var a7 = $("a:eq(6)"); a7.click(function(){ $.growlUI('Hi','Have a nice day!'); }); //onBlock callback a8 = $("a:eq(7)"); a8.click(function(){ $.blockUI({ fadeIn: 1000, timeout: 2000, onBlock: function() { alert('Page is now blocked; fadeIn complete'); } }); }); //Theme var a9 = $("a:last"); a9.click(function(){ $.blockUI( { theme:true, title:'<p style="font-size:25px" mce_style="font-size:25px">This is your title<p>', message:'<p style="font-size:22px;background-color:green;" mce_style="font-size:22px;background-color:green;">This is your message.</p>', timeout:2000 } ); });});// --></mce:script></HEAD><BODY><a href="#" mce_href="#">DEFAULT</a><a href="#" mce_href="#">自定义内容</a><a href="#" mce_href="#">自定义样式</a> <a href="#" mce_href="#">蓝色背景</a><a href="#" mce_href="#">停滞2秒</a><a href="#" mce_href="#">放置一个表单</a><a href="#" mce_href="#">通知（Notification）</a><a href="#" mce_href="#">onBlock callback</a><a href="#" mce_href="#">Theme</a><div id="login" style="display:none" mce_style="display:none"> <form action="#" id="loginForm"> <table> <thead> <th>用户登录</th> </thead> <tr> <td>用户名：</td> <td><input type="text" name="name"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd"></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="登录"/> </td> </tr> </table> </form></div></BODY></HTML>
