jQuery弹出层插件简化版

1. String.prototype.replaceAll=function(s1,s2){
2. returnthis.replace(newRegExp(s1,"gm"),s2);
3. };
4. (function($){
5. /*
6. *$-layer0.1-NewWaveJavascript
7. *
8. *Copyright(c)2008KingWong
10. *$Date:2008-10-09$
11. */
12. var___id___="";
13. var___settings___={};
14. varisMouseDown=false;
16. varcurrentElement=null;
18. vardropCallbacks={};
19. vardragCallbacks={};
21. varbubblings={};
23. varlastMouseX;
24. varlastMouseY;
25. varlastElemTop;
26. varlastElemLeft;
28. vardragStatus={};
30. varholdingHandler=false;
32. $.getMousePosition=function(e){
33. varposx=0;
34. varposy=0;
36. if(!e)vare=window.event;
38. if(e.pageX||e.pageY){
39. posx=e.pageX;
40. posy=e.pageY;
41. }
42. elseif(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. varpos=$.getMousePosition(e);
51. varspanX=(pos.x-lastMouseX);
52. varspanY=(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. returnthis.each(function(){
61. dragCallbacks[this.id]=callback;
62. });
63. };
64. $.fn.ondrop=function(callback){
65. returnthis.each(function(){
66. dropCallbacks[this.id]=callback;
67. });
68. };
70. $.fn.dragOff=function(){
71. returnthis.each(function(){
72. dragStatus[this.id]='off';
73. });
74. };
76. $.fn.dragOn=function(){
77. returnthis.each(function(){
78. dragStatus[this.id]='on';
79. });
80. };
81. $.extend({
82. layerSettings:{
83. id:"layerdiv",
84. width:220,
85. height:220,
86. templete:'<divstyle="height:20px;width:@width@px;background-color:#777777;"><spanid="@moveid@"style="position:relative;left:0px;top:0px;height:20px;width:100px;"><spanid="@titleid@">@title@</span></span><spanclass="layerclose"style="position:relative;top:0px;float:right;right:20px;color:red;">close</span></div><divstyle="border:solid#ff00001px;width:@width@px;height:@height@px;"><divstyle="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;
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. varopacity=$.layerSettings.opacity;
109. __index=$.layermaxindex();
110. var__left=(__bw-_width)>0?(__bw-_width)/2:0;
111. var__top=100;
112. var__bgDiv='<divid="'+___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('<divid="'+___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. varidd=___id___;
124. $(".layerclose").bind("click",function()
125. {
126. $.layerclose(idd);
127. });
128. $("#"+___id___).bind("click",function()
129. {
130. varid=this.id;
131. $.layerSetup(___settings___[id]);
132. $(this).css("z-index",$.layermaxindex());
133. });
134. $(document).bind("click",function(e)
135. {
136. varpos=$.getMousePosition(e);
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. returnfalse;
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. returnfalse;
155. }
156. });
157. (function(){
158. bubblings[___id___]=true;
160. dragStatus[___id___]="on";
162. //setHandler
163. bubblings[this.id]=true;
165. dragStatus[_moveid]="handler";
167. $("#"+_moveid).css("cursor","move");
169. $("#"+_moveid).mousedown(function(e){
170. varid=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. returnbubblings["#"+___id___];
177. isMouseDown=true;
178. currentElement=$("#"+___id___);
180. varpos=$.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. });
191. $("#"+_moveid).mouseup(function(e){
192. holdingHandler=false;
193. });
194. //endsetHandler
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. functionshow()
2. {
3. $.layerSetup({
4. id:"abc",//弹出层的ID
5. title:"test",//标题
6. content:'test',//内容
7. isbg:false,//是否显示背景遮照层
8. opacity:0.3,//背景遮照层的透明度，值越大透明度越低，0为完全透明，1为不透明
9. templete:'<divclass="showwint_mini_title"><spanclass="showwint_mini_close_btn"><ahref="javascript:void(null);"class="layerclose"></a></span><spanclass="showwint_mini_title_content"id="@moveid@"><spanid="@titleid@"></span></span></div><divclass="showwint_mini_content"><divclass="showwint_mini_content_content"id="@contentid@"></div></div>'//模板
10. });
11. $.layershow();
12. }

（2）关闭层：

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

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