前端

img wlkjhxd

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

发表于2008/9/29 21:38:00  2116人阅读

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

 

  1. String.prototype.replaceAll  = function(s1,s2){
  2. return this.replace(new RegExp(s1,"gm"),s2);    
  3. };
  4. (function($){
  5. /*
  6.  * $-layer 0.1 - jquery pulg-in
  7.  *
  8.  * Copyright (c) 2008 King Wong
  9.  * $Date: 2008-09-28  $
  10.  */
  11. var ___win___ = window.self;
  12. var ___self___ = window.self;
  13. var ___id___ = "";
  14. var ___settings___ = {};
  15. var isMouseDown    = false;
  16. var currentElement = null;
  17. var dropCallbacks = {};
  18. var dragCallbacks = {};
  19. var bubblings = {};
  20. var lastMouseX;
  21. var lastMouseY;
  22. var lastElemTop;
  23. var lastElemLeft;
  24. var dragStatus = {};    
  25. var holdingHandler = false;
  26. $.getMousePosition = function(e){
  27.     var posx = 0;
  28.     var posy = 0;
  29.     if (!e) var e = window.event;
  30.     if (e.pageX || e.pageY) {
  31.         posx = e.pageX;
  32.         posy = e.pageY;
  33.     }
  34.     else if (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.     var pos = $.getMousePosition(e);
  42.     var spanX = (pos.x - lastMouseX);
  43.     var spanY = (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.     return this.each(function(){
  51.         dragCallbacks[this.id] = callback;
  52.     });
  53. };
  54. $.fn.ondrop = function(callback){
  55.     return this.each(function(){
  56.         dropCallbacks[this.id] = callback;
  57.     });
  58. };
  59. $.fn.dragOff = function(){
  60.     return this.each(function(){
  61.         dragStatus[this.id] = 'off';
  62.     });
  63. };
  64. $.fn.dragOn = function(){
  65.     return this.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:'<div style="height:20px; width:@width@px; background-color:#777777;"><span id="@moveid@" style="position:relative; left:0px; top:0px; height:20px; width:100px;"><span id="@titleid@">@title@</span></span><span class="layerclose" style="position:relative; top:0px; float:right; right:20px; color:red;">close</span></div><div style="border:solid #ff0000 1px; width:@width@px; height:@height@px;"><div style="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.         
  90.         var win = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target;
  91.         var __bw = $("body",win.document).width();
  92.         var __bh = $("body",win.document).height() > $(window).height() ? $("body",win.document).height() : $(window).height();
  93.         var _width = $.layerSettings.width;
  94.         var _height = $.layerSettings.height;
  95.         
  96.         if(___win___.document.getElementById(___id___)) return;
  97.         var _moveid = ___id___ + "_move";
  98.         var _titleid = ___id___ + "_title";
  99.         var _contentid = ___id___ + "_content";
  100.         var _cssurl = $.layerSettings.cssurl;
  101.         var opacity = $.layerSettings.opacity;
  102.         (function(){
  103.             $("head",win.document).append('<link type="text/css" href="'+_cssurl+'" rel="stylesheet" />');
  104.         })();
  105.         __index = $.layermaxindex();
  106.         var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0;
  107.         var __top = 100;
  108.         var __bgDiv = '<div id="'+___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>';
  109.         if($.layerSettings.isbg)
  110.         {
  111.             $("body",win.document).append(__bgDiv);
  112.         }
  113.         $("body",win.document).append('<div id="'+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>');
  114.         var _templete = $.layerSettings.templete;
  115.         var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid);
  116.         $("#"+___id___,win.document).append(__templete);
  117.         $("#"+_contentid,win.document).append($.layerSettings.content);
  118.         var self = window.self;
  119.         var ___win = $.layerSettings.target.document;
  120.         var idd = ___id___;
  121.         $(".layerclose",win.document).bind("click",function()
  122.         {
  123.             self.$.layerclose(idd,___win);
  124.         });
  125.         $("#"+___id___,win.document).bind("click",function()
  126.          {
  127.              var id = this.id;
  128.              self.$.layerSetup(___settings___[id]);
  129.             self.$(this).css("z-index",$.layermaxindex()); 
  130.          });
  131.         $(win.document,win).bind("click",function(e)
  132.          {
  133.             var pos = self.$.getMousePosition(e);
  134.             
  135.          });
  136.         $(win.document,win).mousemove(function(e){                                          
  137.             if(isMouseDown && dragStatus[currentElement.id] != 'false'){
  138.                 self.$.updatePosition(e);
  139.                 if(dragCallbacks[currentElement.id] != undefined){
  140.                     dragCallbacks[currentElement.id](e, currentElement);
  141.                 }
  142.                 return false;
  143.             }
  144.         });
  145.         $(win.document,win).mouseup(function(e){
  146.             if(isMouseDown && dragStatus[currentElement.id] != 'false'){
  147.                 isMouseDown = false;
  148.                 if(dropCallbacks[currentElement.id] != undefined){
  149.                     dropCallbacks[currentElement.id](e, currentElement);
  150.                 }
  151.                 return false;
  152.             }
  153.         });
  154.         (function(){
  155.             bubblings[___id___] = true;
  156.             dragStatus[___id___] = "on";
  157.             
  158.             //setHandler
  159.             bubblings[this.id] = true;
  160.             
  161.             dragStatus[_moveid] = "handler";
  162.             $("#"+_moveid,win.document).css("cursor""move");  
  163.             $("#"+_moveid,win.document).mousedown(function(e){
  164.                 var id = this.id.replace("_move","");
  165.                 ___id___ = id;
  166.                 self.$("#"+id,win.document).css("z-index",$.layermaxindex());
  167.                 self.$.layerSetup(___settings___[id]);
  168.                 if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler))
  169.                     return bubblings["#"+___id___];
  170.                 
  171.                 isMouseDown    = true;
  172.                 currentElement = self.$("#"+___id___);
  173.                 var pos    = self.$.getMousePosition(e);
  174.                 lastMouseX = pos.x;
  175.                 lastMouseY = pos.y;
  176.                 lastElemTop  = win.document.getElementById(___id___).offsetTop;
  177.                 lastElemLeft = win.document.getElementById(___id___).offsetLeft;
  178.                 self.$.updatePosition(e);
  179.                 holdingHandler = true;
  180.             });
  181.             
  182.             $("#"+_moveid,win.document).mouseup(function(e){
  183.                 holdingHandler = false;
  184.             });
  185.             //end setHandler
  186.         })();
  187.     },
  188.     layerclose:function(__id,__win)
  189.     {
  190.         $("#"+__id+"_background",__win).remove();
  191.         $("#"+__id,__win).remove();
  192.     },
  193.     layermaxindex:function()
  194.     {
  195.         var ___index = 0;
  196.         $.each($("*",___win___.document),function(i,n){
  197.              var __tem = $(n).css("z-index");
  198.              if(__tem>0)
  199.              {
  200.                 if(__tem > ___index)
  201.                 {
  202.                     ___index = __tem + 1;   
  203.                 }
  204.              }
  205.          });
  206.         return ___index;
  207.     }
  208. });
  209. })(jQuery);

使用方法:

 

 

 

 

  1.     $.layerSetup({
  2.                  id:"弹出层的ID",
  3.                  title:'弹出层的标题文字',
  4.                  target:在哪个目标柜架弹出层如window.parent,默认为window.self,
  5.                  cssurl:'弹出层的CSS样式文件的地址',
  6.                  content:'弹出的内容',
  7.                  isbg:是否显示一个遮照层,
  8.                  templete:'为层设置布局模板如:<div class="showwint_mini_title"><span class="showwint_mini_close_btn"><a href="javascript:void(null);" class="layerclose"></a></span><span class="showwint_mini_title_content" id="@moveid@"><span id="@titleid@"></span></span></div><div class="showwint_mini_content"><div class="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、宽、高等,可以根据你自己设计的模板不同放在不同的位置.

阅读全文
0 0

相关文章推荐

img
取 消
img