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

你可能感兴趣的:(JavaScript,jquery,css,prototype)