刚刚写的一个jquery的弹出层的插件

刚刚写的一个jquery的弹出层的插件

1. String.prototype.replaceAll=function(s1,s2){
2. returnthis.replace(newRegExp(s1,"gm"),s2);
3. };
4. (function($){
5. /*
6. *$-layer0.1-jquerypulg-in
7. *
8. *Copyright(c)2008KingWong
10. *$Date:2008-09-28$
11. */
12. var___win___=window.self;
13. var___self___=window.self;
14. var___id___="";
15. var___settings___={};
16. varisMouseDown=false;
18. varcurrentElement=null;
20. vardropCallbacks={};
21. vardragCallbacks={};
23. varbubblings={};
25. varlastMouseX;
26. varlastMouseY;
27. varlastElemTop;
28. varlastElemLeft;
30. vardragStatus={};
32. varholdingHandler=false;
34. $.getMousePosition=function(e){
35. varposx=0;
36. varposy=0;
38. if(!e)vare=window.event;
40. if(e.pageX||e.pageY){
41. posx=e.pageX;
42. posy=e.pageY;
43. }
44. elseif(e.clientX||e.clientY){
45. posx=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
46. posy=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
47. }
48. return{'x':posx,'y':posy};
49. };
50. $.updatePosition=function(e){
51. varpos=$.getMousePosition(e);
53. varspanX=(pos.x-lastMouseX);
54. varspanY=(pos.y-lastMouseY);
55. var_top=(lastElemTop+spanY)>0?(lastElemTop+spanY):0;
56. var_left=(lastElemLeft+spanX)>0?(lastElemLeft+spanX):0;
57. $("#"+___id___,___win___.document).css("top",_top);
58. $("#"+___id___,___win___.document).css("left",_left);
59. };
61. $.fn.ondrag=function(callback){
62. returnthis.each(function(){
63. dragCallbacks[this.id]=callback;
64. });
65. };
66. $.fn.ondrop=function(callback){
67. returnthis.each(function(){
68. dropCallbacks[this.id]=callback;
69. });
70. };
72. $.fn.dragOff=function(){
73. returnthis.each(function(){
74. dragStatus[this.id]='off';
75. });
76. };
78. $.fn.dragOn=function(){
79. returnthis.each(function(){
80. dragStatus[this.id]='on';
81. });
82. };
83. $.extend({
84. layerSettings:{
85. id:"layerdiv",
86. target:window.self,
87. width:220,
88. height:220,
89. 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>',
90. cssurl:'',
91. content:'',
92. title:'',
93. isbg:true,
94. opacity:0.3
95. },
96. layerSetup:function(settings){
97. $.extend($.layerSettings,settings);
98. ___settings___[settings.id]=settings;
99. ___id___=settings.id;
100. },
101. layershow:function(){
102. ___win___=$.layerSettings.target==undefined||$.layerSettings.target==null?window.self:$.layerSettings.target;
104. varwin=$.layerSettings.target==undefined||$.layerSettings.target==null?window.self:$.layerSettings.target;
105. var__bw=$("body",win.document).width();
106. var__bh=$("body",win.document).height()>$(window).height()?$("body",win.document).height():$(window).height();
107. var_width=$.layerSettings.width;
108. var_height=$.layerSettings.height;
110. if(___win___.document.getElementById(___id___))return;
111. var_moveid=___id___+"_move";
112. var_titleid=___id___+"_title";
113. var_contentid=___id___+"_content";
114. var_cssurl=$.layerSettings.cssurl;
115. varopacity=$.layerSettings.opacity;
116. (function(){
117. $("head",win.document).append('<linktype="text/css"href="'+_cssurl+'"rel="stylesheet"/>');
118. })();
119. __index=$.layermaxindex();
120. var__left=(__bw-_width)>0?(__bw-_width)/2:0;
121. var__top=100;
122. 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>';
123. if($.layerSettings.isbg)
124. {
125. $("body",win.document).append(__bgDiv);
126. }
127. $("body",win.document).append('<divid="'+___id___+'"style="z-index:'+__index+';position:absolute;left:'+__left+'px;top:'+__top+'px;"></div>');
128. var_templete=$.layerSettings.templete;
129. var__templete=_templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid);
130. $("#"+___id___,win.document).append(__templete);
131. $("#"+_contentid,win.document).append($.layerSettings.content);
132. varself=window.self;
133. var___win=$.layerSettings.target.document;
134. varidd=___id___;
135. $(".layerclose",win.document).bind("click",function()
136. {
137. self.$.layerclose(idd,___win);
138. });
139. $("#"+___id___,win.document).bind("click",function()
140. {
141. varid=this.id;
142. self.$.layerSetup(___settings___[id]);
143. self.$(this).css("z-index",$.layermaxindex());
144. });
145. $(win.document,win).bind("click",function(e)
146. {
147. varpos=self.$.getMousePosition(e);
149. });
150. $(win.document,win).mousemove(function(e){
151. if(isMouseDown&&dragStatus[currentElement.id]!='false'){
152. self.$.updatePosition(e);
153. if(dragCallbacks[currentElement.id]!=undefined){
154. dragCallbacks[currentElement.id](e,currentElement);
155. }
156. returnfalse;
157. }
158. });
159. $(win.document,win).mouseup(function(e){
160. if(isMouseDown&&dragStatus[currentElement.id]!='false'){
161. isMouseDown=false;
162. if(dropCallbacks[currentElement.id]!=undefined){
163. dropCallbacks[currentElement.id](e,currentElement);
164. }
165. returnfalse;
166. }
167. });
168. (function(){
169. bubblings[___id___]=true;
171. dragStatus[___id___]="on";
173. //setHandler
174. bubblings[this.id]=true;
176. dragStatus[_moveid]="handler";
178. $("#"+_moveid,win.document).css("cursor","move");
180. $("#"+_moveid,win.document).mousedown(function(e){
181. varid=this.id.replace("_move","");
182. ___id___=id;
183. self.$("#"+id,win.document).css("z-index",$.layermaxindex());
184. self.$.layerSetup(___settings___[id]);
185. if((dragStatus[___id___]=="off")||(dragStatus[___id___]=="handler"&&!holdingHandler))
186. returnbubblings["#"+___id___];
188. isMouseDown=true;
189. currentElement=self.$("#"+___id___);
191. varpos=self.$.getMousePosition(e);
192. lastMouseX=pos.x;
193. lastMouseY=pos.y;
195. lastElemTop=win.document.getElementById(___id___).offsetTop;
196. lastElemLeft=win.document.getElementById(___id___).offsetLeft;
198. self.$.updatePosition(e);
199. holdingHandler=true;
200. });
202. $("#"+_moveid,win.document).mouseup(function(e){
203. holdingHandler=false;
204. });
205. //endsetHandler
206. })();
207. },
208. layerclose:function(__id,__win)
209. {
210. $("#"+__id+"_background",__win).remove();
211. $("#"+__id,__win).remove();
212. },
213. layermaxindex:function()
214. {
215. var___index=0;
216. $.each($("*",___win___.document),function(i,n){
217. var__tem=$(n).css("z-index");
218. if(__tem>0)
219. {
220. if(__tem>___index)
221. {
222. ___index=__tem+1;
223. }
224. }
225. });
226. return___index;
227. }
228. });
229. })(jQuery);

使用方法：

1. $.layerSetup({
2. id:"弹出层的ID",
3. title:'弹出层的标题文字',
4. target:在哪个目标柜架弹出层如window.parent，默认为window.self,
5. cssurl:'弹出层的CSS样式文件的地址',
6. content:'弹出的内容',
7. isbg:是否显示一个遮照层,
8. 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>',
9. opacity:设置遮照层的透明度,
10. width:宽,
11. height:高
12. });
13. $.layershow();

其中布局模板中的"@titleid@"、"@moveid@"、"@contentid@"、"@width@"、"@height@"为模板中放置标题ID、拖动ID、内容ID、宽、高等，可以根据你自己设计的模板不同放在不同的位置.