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 
  9 
10  * $Date: 2008-10-09  $ 
11    */  
12  var ___id___ =   "" ; 
13  var ___settings___ = {}; 
14  var isMouseDown    =   false ; 
15 
16  var currentElement =   null ; 
17 
18  var dropCallbacks = {}; 
19  var dragCallbacks = {}; 
20 
21  var bubblings = {}; 
22 
23  var lastMouseX; 
24  var lastMouseY; 
25  var lastElemTop; 
26  var lastElemLeft; 
27 
28  var dragStatus = {};     
29 
30  var holdingHandler =   false ; 
31 
32  $.getMousePosition =   function (e){ 
33      var posx =   0 ; 
34      var posy =   0 ; 
35 
36      if ( ! e) var e = window.event; 
37 
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); 
50 
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  }; 
58 
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  }; 
69 
70  $.fn.dragOff =   function (){ 
71      return   this .each( function (){ 
72          dragStatus[ this .id] =   ' off ' ; 
73      }); 
74  }; 
75 
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 ; 
159 
160              dragStatus[___id___] =   " on " ; 
161               
162              // setHandler
163              bubblings[ this .id] =   true ; 
164               
165              dragStatus[_moveid] =   " handler " ; 
166 
167              $( " # " + _moveid).css( " cursor " , " move " );    
168 
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___); 
179 
180                  var pos    = $.getMousePosition(e); 
181                  lastMouseX = pos.x; 
182                  lastMouseY = pos.y; 
183 
184                  lastElemTop  = document.getElementById(___id___).offsetTop; 
185                  lastElemLeft = document.getElementById(___id___).offsetLeft; 
186 
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);