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=""> <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>

你可能感兴趣的:(JavaScript,html,jquery,function,callback,generator)