jquery.blockUI.js的使用示例
2010-12-27 17:17
369 查看
<!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>
相关文章推荐
- jquery.blockUI.js的使用示例
- 使用JQuery blockUI插件示例(加载数据时使用相当于updateprogress)
- jQuery遮罩插件 jQuery.blockUI.js
- jQueryui autocomplete使用示例
- 使用jquery.upload.js实现异步上传示例代码
- jquery.blockUI.js实现上传滚动等待效果
- js日历,使用datepicker.js,ui.core.js,jquery-1.7.1.js
- 使用Jquery Easy UI要导入的js顺序
- 使用Jquery Easy UI要导入的js顺序
- jquery ui autocomplete使用示例
- 使用Jquery Easy UI要导入的js顺序
- jQuery简单图表peity.js使用示例
- 利用Jquery.blockui.js创建可拖动、自定义内容的弹出层
- jQuery图片切换插件jquery.cycle.js使用示例
- 利用Ajax向Servlet发送请求下载统计后的Excel文件,利用jquery.blockUI.js给予用户等待提示
- 使用Jquery blockUI插件实现在点击按钮提交后阻止再次点击,当处理完后解除阻止
- How to use jquery plugin jquery.blockUI.js?
- Node.js 使用jQuery取得Nodejs http服务端返回的JSON对象示例
- jquery blockUI.js
- jquery.blockUI.js上传滚动等待效果实现思路及代码