`
wlcxx98
  • 浏览: 62872 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

刚刚写的一个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、宽、高等,可以根据你自己设计的模板不同放在不同的位置.

分享到:
评论

相关推荐

    jquery弹出层插件

    《jQuery弹出层插件深度解析》 在Web开发领域,jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于用户交互和界面展示,弹出层(Modal)是不可或缺的一部分,它能够吸引用户的注意力并提供额外的信息或操作...

    一款不错的Jquery弹出层插件

    标题中的“一款不错的Jquery弹出层插件”指的是一个基于JavaScript库JQuery设计的用于创建弹出对话框或模态窗口的插件。在网页交互设计中,弹出层通常用于显示通知、提示信息、表单或者进行确认操作,为用户提供一种...

    jquery弹出层插件SexyLightBox

    **jQuery弹出层插件SexyLightBox详解** 在网页设计中,弹出层是一种常见的交互元素,用于在用户点击某个链接或按钮时显示一个浮动窗口,通常用来展示图片、视频或者详细信息。SexyLightBox是一款基于jQuery的弹出层...

    jQuery弹出层插件大全

    jQuery弹出层插件在网页开发中非常常见,它们用于创建弹窗、模态对话框、图片预览等效果,增强了用户体验。以下是一些流行的jQuery弹出层插件及其特点: 1. **Thickbox**: Thickbox是一款轻量级的jQuery插件,用于...

    JQuery弹出层插件

    在前端开发中,jQuery弹出层插件是用于创建弹窗效果的重要工具,它能够帮助开发者轻松实现模态对话框、提示信息、加载提示等交互功能。本篇将详细介绍jQuery弹出层插件,以及如何使用名为"Popup Div"的实例。 首先...

    jquery 弹出层插件

    本文将详细介绍一个名为“jQuery弹出层插件”的工具,该插件以其轻量级、易于使用和高度可定制化的特点,深受开发者喜爱。 首先,我们了解下什么是jQuery。jQuery是由John Resig于2006年创建的一个JavaScript库,它...

    jquery 弹出层插件下载(简单、易用)

    首先,让我们深入了解一下jQuery弹出层插件的基本概念。弹出层通常包括模态对话框和非模态对话框两种类型。模态对话框会阻止用户与页面其他部分的交互,直到弹出层被关闭;而非模态对话框则允许用户在不关闭弹出层的...

    jQuery弹出层插件三种简单遮罩弹出框效果.rar

    《jQuery弹出层插件:实现简单遮罩弹出框效果》 在Web开发中,弹出层(Modal)是一种常见的交互元素,用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库,提供了丰富的插件来...

    自己写的jquery 弹出层插件,可拖动

    标题中的“自己写的jquery 弹出层插件,可拖动”表明这是一个基于jQuery的自定义弹出框插件,具备拖动功能。在Web开发中,弹出层(也称为对话框或模态窗口)常用于显示警告、确认信息或者提供用户交互界面。这个插件...

    基于jQuery弹出层插件thickbox

    【jQuery弹出层插件thickbox】是一种广泛使用的JavaScript库,它基于强大的jQuery框架,为网页添加了优雅且功能丰富的弹出层效果。 Thickbox主要用于创建全屏背景的图片查看器、轻量级的模态对话框以及iframe加载等...

    jQuery弹出层插件三种简单遮罩弹出框效果

    本文将深入探讨标题所提及的"jQuery弹出层插件三种简单遮罩弹出框效果",以及如何利用jQuery实现这些效果。 首先,让我们了解什么是弹出层和遮罩弹出框。弹出层(Popup Layer)是一种常见的网页交互设计,当用户...

    jQuery弹出层插件

    **jQuery弹出层插件详解** 在Web开发中,弹出层是一种常见的交互设计,用于显示重要的信息或者进行用户操作,如登录对话框、提示消息、表单提交等。jQuery作为一个轻量级、功能强大的JavaScript库,提供了丰富的...

    jQuery弹出层插件Sexy LightBox.zip

    jQuery弹出层插件Sexy LightBox是一款漂亮动感的lightbox弹出层插件sexy lightbox 2.3。

    20种弹出层,弹窗 jQuery+CSS3 多功能弹出层插件v2.0.1

    本文将深入探讨一款名为“20种弹出层”的jQuery+CSS3多功能弹出层插件v2.0.1,它以其丰富的样式和强大的功能,为开发者提供了极大的便利。 一、插件介绍 "20种弹出层"是一款基于jQuery和CSS3技术的弹出层插件,它...

    超级漂亮的Jquery弹出层插件

    超级漂亮的Jquery弹出层插件,可支持以下功能 1、触发响应事件 2、设置弹出层的标题 3、设置弹出层类型(text、容器ID、URL、Iframe) 4、弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址) 5、...

    jquery弹出层插件.zip

    通常,一个jQuery弹出层插件会包含CSS文件(定义样式)、JavaScript文件(实现逻辑)以及示例HTML文件(展示用法)。这些文件可能分别命名为`jquery.popup.js`、`popup.css`和`demo.html`。 1. JavaScript实现: -...

    jQuery弹出层插件PopupDiv-v1.0下载

    jQuery弹出层插件PopupDiv-v1.0是一款基于JavaScript库jQuery开发的用户界面组件,主要用于在网页上创建各种类型的弹出窗口。弹出层在Web应用中非常常见,用于显示通知、对话框、表单、图片轮播等多种功能。PopupDiv...

    layer jQuery弹出层插件写的图片查看器(相册层),兼容主流浏览器

    **layer jQuery弹出层插件** 是一个广泛应用于前端开发中的工具,专为创建各种弹出层效果而设计。这款插件以其强大的功能和简洁的API接口,深受开发者喜爱,尤其在实现图片查看器(相册层)这样的交互式功能时,表现...

    一款超级好用的jquery弹出层插件

    一款很好用的jquery弹出层插件,附带教程

Global site tag (gtag.js) - Google Analytics