一个jquery插件,页面上的等待提示
2015-04-15 14:55
369 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="http://static.blog.csdn.net/scripts/jquery.js"></script> <script type="text/javascript"> /** * 使用方法: * 开启:MaskUtil.mask(); * 关闭:MaskUtil.unmask(); * * MaskUtil.mask('其它提示文字...'); */ // MaskUtil Start var MaskUtil = (function(){ var $mask,$maskMsg; var defMsg = '正在处理,请稍待。。。'; function init(){ if(!$mask){ $mask = $("<div></div>") .css({ 'position' : 'absolute' ,'left' : '0' ,'top' : '0' ,'width' : '100%' ,'height' : '100%' ,'opacity' : '0.3' ,'filter' : 'alpha(opacity=30)' ,'display' : 'none' ,'background-color': '#ccc' }) .appendTo("body"); } if(!$maskMsg){ $maskMsg = $("<div></div>") .css({ 'position': 'absolute' ,'top': '50%' ,'margin-top': '-20px' ,'padding': '5px 20px 5px 20px' ,'width': 'auto' ,'border-width': '1px' ,'border-style': 'solid' ,'display': 'none' ,'background-color': '#ffffff' ,'font-size':'14px' }) .appendTo("body"); } $mask.css({width:"100%",height:$(document).height()}); var scrollTop = $(document.body).scrollTop(); $maskMsg.css({ left:( $(document.body).outerWidth(true) - 190 ) / 2 ,top:( ($(window).height() - 45) / 2 ) + scrollTop }); } return { mask:function(msg){ init(); $mask.show(); $maskMsg.html(msg||defMsg).show(); } ,unmask:function(){ $mask.hide(); $maskMsg.hide(); } } }()); // MaskUtil End function doSomething(msg){ MaskUtil.mask(msg); setTimeout(function(){ // 模拟操作时间,3秒后关闭 MaskUtil.unmask(); },3000); } </script> </head> <body> <input type="button" value="操作" onclick="doSomething()"> <input type="button" value="操作2" onclick="doSomething('正在查询中...')"> </body> </html>
相关文章推荐
- 自定义Jquery插件——由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件
- 文本框文本域提示自动显示隐藏jQuery小插件实例页面
- 一个超棒的消息提示jQuery插件 - Noty
- 分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav
- 分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav
- 一个简单的消息提示jquery插件
- 一个帮助你实现pinterest页面布局的jQuery插件 - jQuery.Shapeshift
- 自己写的一个简单的jQuery提示插件
- 一个将页面元素设为不可用(Disabled)的 jQuery 插件
- 分享一个jquery插件-主要用于显示微博人的图像和鼠标提示等poshytip
- 发布一个在Web下输入密码时提示大写锁定键的Jquery插件
- jQuery,实现想弹出什么,弹出什么(弹出提示、弹出一个新的页面等等)
- 分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav
- 一个很炫的css3动画做的jquery.loding等待加载插件
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- 页面中使用已经引入的jquery插件,结果却提示JS报错找不到函数【问题解决】
- 本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.
- 一个超棒的消息提示jQuery插件 - Noty
- 一个超棒的消息提示jQuery插件 - Noty
- jquery--jQuery插件【capacityFixed-类似于新浪微博新消息提示的定位框的实例页面】