jquery蒙版控件实现代码
2010-12-08 00:00
495 查看
样式代码:
js控件代码:
#div_maskContainer { display: none; } /*蒙版样式*/ #div_Mask{ z-index:1000; filter:alpha(opacity=40); position: absolute; left:0px; top:0px; background-color: #D4D0C8; } /*显示信息样式*/ #div_loading{ width:300px;height: 60px;position: absolute; border: 1px outset #B4E0F2; padding-top: 40px; text-align: center; background-color: #CCE9F9; z-index: 10000; filter:alpha(opacity=100);!important }
js控件代码:
/** 蒙版信息控件 用法: 1.引用 mask.css 2.引用 mask.js 3.调用方法 var obj=new MaskControl(); //显示蒙版提示信息 obj.show("显示的提示信息"); //隐藏蒙版提示信息 obj.hide(); //显示提示信息,并隔timeOut(1000代表1秒)自动关闭 obj.autoDelayHide=function(html,timeOut) */ function MaskControl(){ this.show=function(html){ var loader=$("#div_maskContainer"); if(loader.length==0){ loader=$("<div id='div_maskContainer'><div id='div_Mask' ></div><div id='div_loading' ></div></div>"); $("body").append(loader); } self.loader=loader; var w=$(window).width(); var h=$(window).height(); var divMask=$("#div_Mask"); divMask.css("top",0).css("left",0).css("width",w).css("height",h); var tipDiv=$("#div_loading"); if(html==undefined) html=""; tipDiv.html(html); loader.show(); var x=(w-tipDiv.width())/2; var y=(h-tipDiv.height())/2; tipDiv.css("left",x); tipDiv.css("top",y); }, this.hide=function(){ var loader=$("#div_maskContainer"); if(loader.length==0) return ; loader.remove(); }, this.autoDelayHide=function(html,timeOut){ var loader=$("#div_maskContainer"); if(loader.length==0) { this.show(html); } else{ var tipDiv=$("#div_loading"); tipDiv.html(html); } if(timeOut==undefined) timeOut=3000; window.setTimeout(this.hide,timeOut); } }
相关文章推荐
- .net mvc页面UI之Jquery博客日历控件实现代码
- 网络图片延迟加载实现代码 超越jquery控件
- jquery实现页面控件拖动效果js代码
- 基于jquery的让页面控件不可用的实现代码
- jquery下操作HTML控件的实现代码
- 基于Jquery的动态添加控件并取值的实现代码
- 基于Jquery的动态添加控件并取值的实现代码
- jquery 分页控件实现代码
- NHibernate+spring.net+jquery打造UI控件库(mvc+webform两种实现) accordion控件的初步实现(附代码下载)
- jquery CheckBox、RadioButton、DropDownList的取值赋值实现代码/服务器控件 gridview 循环
- JQuery select控件的相关操作实现代码
- 基于jQuery的树控件实现代码(asp.net+json)
- jquery 可拖拽的窗体控件实现代码
- 网络图片延迟加载实现代码 超越jquery控件
- jquery下操作HTML控件的实现代码
- JQuery select控件的相关操作实现代码
- jquery 分页控件实现代码
- .net mvc页面UI之Jquery博客日历控件实现代码