jquery.blockUI.js的使用示例
<!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=""> <script language=javascript src="js/jquery.js"></script> <script language=javascript src="js/jquery.blockUI.js"></script> <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">This is your title<p>', message:'<p style="font-size:22px;background-color:green;">This is your message.</p>', timeout:2000 } ); }); }); </script> </HEAD>
<BODY> <a href="#">DEFAULT</a> <a href="#">自定义内容</a> <a href="#">自定义样式</a> <a href="#">蓝色背景</a> <a href="#">停滞2秒</a> <a href="#">放置一个表单</a> <a href="#">通知（Notification）</a> <a href="#">onBlock callback</a> <a href="#">Theme</a>
<div id="login" 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>