jQuery弹出层插件简化版

1. String.prototype.replaceAll  = function(s1,s2){
2. return this.replace(new RegExp(s1,"gm"),s2);    
3. };
4. (function($){
5. /*
6.  * $-layer 0.1 - New Wave Javascript
7.  *
8.  * Copyright (c) 2008 King Wong
10.  * $Date: 2008-10-09  $
11.  */
12. var ___id___ = "";
13. var ___settings___ = {};
14. var isMouseDown    = false;
16. var currentElement = null;
18. var dropCallbacks = {};
19. var dragCallbacks = {};
21. var bubblings = {};
23. var lastMouseX;
24. var lastMouseY;
25. var lastElemTop;
26. var lastElemLeft;
28. var dragStatus = {};    
30. var holdingHandler = false;
32. $.getMousePosition = function(e){
33.     var posx = 0;
34.     var posy = 0;
36.     if (!e) var e = window.event;
38.     if (e.pageX || e.pageY) {
39.         posx = e.pageX;
40.         posy = e.pageY;
41.     }
42.     else if (e.clientX || e.clientY) {
43.         posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
44.         posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
45.     }
46.     return { 'x': posx, 'y': posy };
47. };
48. $.updatePosition = function(e) {
49.     var pos = $.getMousePosition(e);
51.     var spanX = (pos.x - lastMouseX);
52.     var spanY = (pos.y - lastMouseY);
53.     var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0;
54.     var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0;
55.     $("#"+___id___).css("top",  _top);
56.     $("#"+___id___).css("left", _left);
57. };
59. $.fn.ondrag = function(callback){
60.     return this.each(function(){
61.         dragCallbacks[this.id] = callback;
62.     });
63. };
64. $.fn.ondrop = function(callback){
65.     return this.each(function(){
66.         dropCallbacks[this.id] = callback;
67.     });
68. };
70. $.fn.dragOff = function(){
71.     return this.each(function(){
72.         dragStatus[this.id] = 'off';
73.     });
74. };
76. $.fn.dragOn = function(){
77.     return this.each(function(){
78.         dragStatus[this.id] = 'on';
79.     });
80. };
81. $.extend({
82.     layerSettings:{
83.         id:"layerdiv",
84.         width:220,
85.         height:220,
86.         templete:'<div style="height:20px; width:@width@px; background-color:#777777;"><span id="@moveid@" style="position:relative; left:0px; top:0px; height:20px; width:100px;"><span id="@titleid@">@title@</span></span><span class="layerclose" style="position:relative; top:0px; float:right; right:20px; color:red;">close</span></div><div style="border:solid #ff0000 1px; width:@width@px; height:@height@px;"><div style="width:100%; height:100%; background-color:#ffffff;" id="@contentid@"></div></div>',
87.         content:'',
88.         title:'',
89.         isbg:true,
90.         opacity:0.3
91.     },
92.     layerSetup: function( settings ) {
93.         $.extend( $.layerSettings, settings );
94.         ___settings___[settings.id] = settings;
95.         ___id___ = settings.id;
96.     },
97.     layershow:function(){       
98.         var __bw = $("body").width();
99.         var __bh = $("body").height() > $(window).height() ? $("body").height() : $(window).height();
100.         var _width = $.layerSettings.width;
101.         var _height = $.layerSettings.height;
102.         
103.         if(document.getElementById(___id___)) return;
104.         var _moveid = ___id___ + "_move";
105.         var _titleid = ___id___ + "_title";
106.         var _contentid = ___id___ + "_content";
107.         var _cssurl = $.layerSettings.cssurl;
108.         var opacity = $.layerSettings.opacity;
109.         __index = $.layermaxindex();
110.         var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0;
111.         var __top = 100;
112.         var __bgDiv = '<div id="'+___id___+'_background" style="background:#000000; filter:alpha(opacity='+(opacity*100)+'); opacity: '+opacity+'; width:'+__bw+'px; height:'+__bh+'px; z-index:'+(__index++)+'; position:absolute; left:0px; top:0px;"></div>';
113.         if($.layerSettings.isbg)
114.         {
115.             $("body").append(__bgDiv);
116.         }
117.         $("body").append('<div id="'+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>');
118.         var _templete = $.layerSettings.templete;
119.         var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid);
120.         $("#"+___id___).append(__templete);
121.         $("#"+_contentid).append($.layerSettings.content);
122.         $("#"+_titleid).append($.layerSettings.title);
123.         var idd = ___id___;
124.         $(".layerclose").bind("click",function()
125.         {
126.             $.layerclose(idd);
127.         });
128.         $("#"+___id___).bind("click",function()
129.          {
130.              var id = this.id;
131.              $.layerSetup(___settings___[id]);
132.             $(this).css("z-index",$.layermaxindex()); 
133.          });
134.         $(document).bind("click",function(e)
135.          {
136.             var pos = $.getMousePosition(e);
137.             
138.          });
139.         $(document).mousemove(function(e){                                          
140.             if(isMouseDown && dragStatus[currentElement.id] != 'false'){
141.                 $.updatePosition(e);
142.                 if(dragCallbacks[currentElement.id] != undefined){
143.                     dragCallbacks[currentElement.id](e, currentElement);
144.                 }
145.                 return false;
146.             }
147.         });
148.         $(document).mouseup(function(e){
149.             if(isMouseDown && dragStatus[currentElement.id] != 'false'){
150.                 isMouseDown = false;
151.                 if(dropCallbacks[currentElement.id] != undefined){
152.                     dropCallbacks[currentElement.id](e, currentElement);
153.                 }
154.                 return false;
155.             }
156.         });
157.         (function(){
158.             bubblings[___id___] = true;
160.             dragStatus[___id___] = "on";
161.             
162.             //setHandler
163.             bubblings[this.id] = true;
164.             
165.             dragStatus[_moveid] = "handler";
167.             $("#"+_moveid).css("cursor", "move");   
169.             $("#"+_moveid).mousedown(function(e){
170.                 var id = this.id.replace("_move","");
171.                 ___id___ = id;
172.                 $("#"+id).css("z-index",$.layermaxindex());
173.                 $.layerSetup(___settings___[id]);
174.                 if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler))
175.                     return bubblings["#"+___id___];
176.                 
177.                 isMouseDown    = true;
178.                 currentElement = $("#"+___id___);
180.                 var pos    = $.getMousePosition(e);
181.                 lastMouseX = pos.x;
182.                 lastMouseY = pos.y;
184.                 lastElemTop  = document.getElementById(___id___).offsetTop;
185.                 lastElemLeft = document.getElementById(___id___).offsetLeft;
187.                 $.updatePosition(e);
188.                 holdingHandler = true;
189.             });
190.             
191.             $("#"+_moveid).mouseup(function(e){
192.                 holdingHandler = false;
193.             });
194.             //end setHandler
195.         })();
196.     },
197.     layerclose:function(__id)
198.     {
199.         $("#"+__id+"_background").remove();
200.         $("#"+__id).remove();
201.     },
202.     layermaxindex:function()
203.     {
204.         var ___index = 0;
205.         $.each($("*"),function(i,n){
206.              var __tem = $(n).css("z-index");
207.              if(__tem>0)
208.              {
209.                 if(__tem > ___index)
210.                 {
211.                     ___index = __tem + 1;   
212.                 }
213.              }
214.          });
215.         return ___index;
216.     }
217. });
218. })(jQuery);

 

使用方法：

（1）显示层：

1. function show()
2. {
3. $.layerSetup({
4.                  id:"abc",//弹出层的ID
5.                  title:"test",//标题
6.                  content:'test',//内容
7.                  isbg:false,//是否显示背景遮照层
8.                  opacity:0.3,//背景遮照层的透明度，值越大透明度越低，0为完全透明，1为不透明
9.                  templete:'<div class="showwint_mini_title"><span class="showwint_mini_close_btn"><a href="javascript:void(null);" class="layerclose"></a></span><span class="showwint_mini_title_content" id="@moveid@"><span id="@titleid@"></span></span></div><div class="showwint_mini_content"><div class="showwint_mini_content_content" id="@contentid@"></div></div>'//模板
10.                  });
11. $.layershow();
12. }

（2）关闭层：

 

1. $.layerclose("弹出层的ID");

 

注意：那个如果你的模板有CSS文件的话，就要直接引入到本页面就行了，这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了。