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

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

分享到:
评论

相关推荐

    JQuery弹出层插件

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

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

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

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

    《jQuery+CSS3多功能弹出层插件v2.0.1详解》 在Web开发中,弹出层(也称为对话框或模态窗口)是不可或缺的元素,它们用于显示重要的信息、提示用户确认操作或者提供交互式内容。本文将深入探讨一款名为“20种弹出层...

    zeroModal-扁平化风格jQuery弹出层插件

    《zeroModal:打造扁平化风格的jQuery弹出层插件》 在现代网页设计中,扁平化风格因其简洁、清晰的特点深受喜爱,而jQuery弹出层插件则是提升用户体验的重要工具。"zeroModal"就是这样一款专为实现扁平化效果而设计...

    jquery弹出层特效

    本文将详细探讨"jquery弹出层特效"这一主题,以及相关文件如何实现这一功能。 首先,标题"jquery弹出层特效"指的是使用jQuery库创建的弹出窗口或模态对话框效果。在网页设计中,弹出层通常用于显示警告信息、用户...

    jquery弹出层插件.zip

    jQuery弹出层插件通常用于创建弹出对话框、模态框或者提示信息,这些功能在网页应用中非常常见,能够提供更好的用户体验。下面将详细解释相关知识点。 1. **jQuery**: jQuery是由John Resig开发的,它的目标是使...

    jQuery弹出层插件简化版代码第1/2页

    《jQuery弹出层插件简化版代码解析》 在网页开发中,弹出层是一种常见的交互元素,用于显示额外信息或进行用户交互。jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能来实现这样的效果。本文将深入解析一个...

    jQuery弹出层 可移动层 提示框 浮动层

    《jQuery弹出层技术详解与应用实践》 在网页开发中,用户交互体验的重要性日益凸显,其中弹出层(Popup Layer)作为一种常见的交互元素,被广泛应用于提示信息、表单填写、图片预览等场景。jQuery,作为JavaScript...

    jQuery弹出层插件简化版代码下载

    总之,这个jQuery弹出层插件简化版通过扩展jQuery的API,提供了创建和管理弹出层的便利。通过简单的API调用和事件绑定,开发者可以轻松实现弹出层的动态效果,提升用户体验。同时,由于其代码量较小,易于理解和定制...

    Jquery弹出层插件,多种自定义,不断更新中

    总结起来,"Jquery弹出层插件"是一个旨在简化和优化网页弹出层实现的jQuery扩展,强调可定制性和持续改进。通过其提供的API,开发者能够快速集成并灵活调整弹出层功能,提升网页的交互体验。随着作者的不断更新,该...

    简单的jQuery弹出遮罩层小插件,可移动,兼容IE678.rar

    在这个小插件中,jQuery被用来实现弹出层的动态效果,如显示、隐藏、移动和关闭等操作。利用jQuery的高效和跨浏览器特性,开发者可以避免直接处理底层的DOM操作和事件绑定,从而提高代码的可读性和维护性。 "qsBox...

    jquery 弹出层,点击链接弹出,不支持框架

    1. **寻找替代品**:有很多现代的jQuery弹出层插件可供选择,如Bootstrap Modal、Magnific Popup、Fancybox等。这些插件提供了更好的性能和更多的自定义选项,且持续维护更新。 2. **自定义实现**:如果你不希望...

    jquery弹出层需要的js

    对于"jquery弹出层需要的js"这个主题,我们将深入探讨如何利用jQuery来创建弹出层,并结合给定的文件名,了解相关的核心知识点。 首先,`jquery-3.1.1.min.js`是jQuery库的压缩版本,它是整个项目的基础。这个文件...

    Jquery简单的弹出层带遮罩插件

    本插件是关于“Jquery简单的弹出层带遮罩”的实现,它能够为网页提供一种优雅的方式来显示弹出窗口或对话框,并且在弹出窗口周围添加一个半透明的遮罩层,增强用户体验。 1. **jQuery基础** jQuery的核心在于它的...

    Jquery弹出层插件—fancybox

    fancybox作为一款优秀的jQuery弹出层插件,以其简洁的API和丰富的功能,极大地简化了Web开发者的工作。无论是简单的图片预览还是复杂的多媒体内容展示,fancybox都能胜任。通过理解和熟练运用fancybox,你可以为你的...

    基于jQuery的弹出层放大插件

    在实际应用中,"Lightbox图片放大插件"和"jQuery弹出层放大插件"可能是此类插件的实例,它们提供了上述功能,可以帮助开发者轻松实现网页中的图片放大展示。通过学习和理解这些插件的工作原理,开发者可以更好地定制...

    jQuery 弹出浮动层兼容各种浏览器

    总之,jQuery弹出浮动层是网页交互设计中的常见工具,通过jQuery的便利性和强大的功能,我们可以轻松创建出具有拖动和透明效果,并且兼容多种浏览器的弹出层。这样的技术不仅提高了用户体验,也降低了开发和维护的...

    Jquery点击输入框弹出层

    弹出层的实现方式有很多种,可以创建一个隐藏的HTML元素,当点击输入框时显示,或者使用插件如jQuery UI的Dialog。在这里,我们假设你已经有了一个CSS类,用于定义弹出层的样式,例如`.popup`,并将其设置为初始时的...

Global site tag (gtag.js) - Google Analytics