WEB开发网
开发学院网页设计JavaScript 忙里偷闲写的jquery的屏遮层插件 阅读

忙里偷闲写的jquery的屏遮层插件

 2010-09-14 13:47:44 来源:WEB开发网   
核心提示:今天看到一同事做弹出框,做背景遮蔽层,忙里偷闲写的jquery的屏遮层插件,捣鼓来捣鼓去的 就是 问题大堆,看不过去了,1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xht

今天看到一同事做弹出框,做背景遮蔽层,捣鼓来捣鼓去的 就是 问题大堆,看不过去了,顺手做了个jquery的插件,其实很头痛的, 我不怎么喜欢用jquery,所以没看过它的api,倒是看过它的源码,于是我临时下载了份jquery的api文档,临阵磨枪,总算捣鼓出来了,交给他们却不用,因为我才来这里没多久,他们都老员工了,总觉的自己比我能干,也不愿意用我的代码,汗,怎么说也不用我的,多好的代码,丢了可惜,就放这里共享了。

希望对大家有用 小插件来的,见笑了啊各位,

代码呈上,测试通过的浏览器有ie6,ie7,ie8, ff,oprea,safari等。 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <HTML>
 3  <HEAD>
 4   <TITLE> New Document </TITLE>
 5   <META NAME="Generator" CONTENT="EditPlus">
 6   <META NAME="Author" CONTENT="">
 7   <META NAME="Keywords" CONTENT="">
 8   <META NAME="Description" CONTENT="">
 9   <SCRIPT src="./jquery.js" type="text/javascript"></SCRIPT>
10   <style>
11      body {margin:0;padding:0;}
12   </style>
13  </HEAD>
14 
15  <BODY>
16  <select id="s"><option>测试ie6下select的bug</option></select><br>
17  基于jquery的屏蔽层插件   create   李涛<br>
18  兼容浏览器屏蔽层,支持ie6,7,8 ff   chrome  safari oprea等主流浏览器。<br>
19  使用方法<br>
20  var o=new $.OverLay({Opacity:10,Color:"red",zIndex:500});<br>
21  o.Show()显示<br>
22  o.Close()为关闭该屏蔽层<br>
23  参数说明 {Opacity:10,Color:"red",zIndex:500} 该参数为屏蔽层配置 Opacity为透明度 color为屏蔽层的颜色zindex为屏蔽层的zindex值<br>
24  <span style="color:blue">参数可以为空 既var o=new $.OverLay();因为该插件培植有默认项</span>
25  <br><br><br><br><br>
26  
27   <script>
28 var isIE6 = $.browser.msie && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6);//因为jquery不能很好的判断ie6
29 (function($){
30 $.OverLay = (function(){return function(){this.initialize.apply(this, arguments);}})();
31 $.OverLay.prototype = {
32   initialize: function(options){
33     this.SetOptions(options);    
34     this.Lay = $(document.createElement("div"));
35     $('body').append(this.Lay)
36     this.Color = this.options.Color;
37     this.Opacity = parseInt(this.options.Opacity);
38     this.zIndex = parseInt(this.options.zIndex);    
39     this.Lay.css({display:"none", zIndex:this.zIndex,left:0,top:0,position:"fixed",width:"100%",height:"100%"})
40     if(isIE6){
41         this.Lay.css({position : "absolute"});
42         this._resize =(function(object, fun) {
43                 return function() {
44                     return fun.apply(object, arguments);
45                 }
46             })(this,function(){
47             this.Lay.css({width:Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px",height:Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"});
48             })
49         
50         this.Lay.html('<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>');
51     }
52   },
53   SetOptions: function(options) {
54     this.options = {Color:"#666",Opacity:50,zIndex:1000};
55     jQuery.extend(this.options,options || {});  
56   },
57   Show: function() {
58     if(isIE6){ this._resize(); $(window).resize(this._resize)}
59     this.Lay.css({backgroundColor:this.Color,display:"block",position:"absolute"})
60     if($.browser.msie) {this.Lay.css({filter : "alpha(opacity:" + this.Opacity + ")"})} else {this.Lay.css({opacity : this.Opacity / 100})}
61   },
62   Close: function() {
63     this.Lay.css({display : "none"});
64     if(isIE6){ $(window).resize(function(){})}
65   }
66 };})(jQuery)
67 
68 
69 ///下面为调用实例
70 var o
71 var open11=function(){
72    o=new $.OverLay({Opacity:10,Color:"red"});
73    o.Show();   
74    setTimeout("o.Close()",3000);  //三秒后关闭该屏蔽层                                    
75 }
76    
77 
78 </script>
79   <input type="button" onclick="open11()" value="点击测试,屏蔽层将在三秒后关闭">
80 
81  </BODY>
82 </HTML>

Tags:忙里偷闲 jquery 插件

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接