无问的BLOG

博客园 首页 新随笔 联系 订阅 管理
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 - New Wave Javascript 
  7  * 
  8  * Copyright (c) 2008 King Wong 
  9 
10  * $Date: 2008-10-09  $ 
11  */ 
12 var ___id___ = ""; 
13 var ___settings___ = {}; 
14 var isMouseDown    = false; 
15 
16 var currentElement = null; 
17 
18 var dropCallbacks = {}; 
19 var dragCallbacks = {}; 
20 
21 var bubblings = {}; 
22 
23 var lastMouseX; 
24 var lastMouseY; 
25 var lastElemTop; 
26 var lastElemLeft; 
27 
28 var dragStatus = {};     
29 
30 var holdingHandler = false; 
31 
32 $.getMousePosition = function(e){ 
33     var posx = 0; 
34     var posy = 0; 
35 
36     if (!e) var e = window.event; 
37 
38     if (e.pageX || e.pageY) { 
39         posx = e.pageX; 
40         posy = e.pageY; 
41     } 
42     else if (e.clientX || e.clientY) { 
43         posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
44         posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop; 
45     } 
46     return { 'x': posx, 'y': posy }; 
47 }; 
48 $.updatePosition = function(e) { 
49     var pos = $.getMousePosition(e); 
50 
51     var spanX = (pos.x - lastMouseX); 
52     var spanY = (pos.y - lastMouseY); 
53     var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0; 
54     var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0; 
55     $("#"+___id___).css("top",  _top); 
56     $("#"+___id___).css("left", _left); 
57 }; 
58 
59 $.fn.ondrag = function(callback){ 
60     return this.each(function(){ 
61         dragCallbacks[this.id] = callback; 
62     }); 
63 }; 
64 $.fn.ondrop = function(callback){ 
65     return this.each(function(){ 
66         dropCallbacks[this.id] = callback; 
67     }); 
68 }; 
69 
70 $.fn.dragOff = function(){ 
71     return this.each(function(){ 
72         dragStatus[this.id] = 'off'; 
73     }); 
74 }; 
75 
76 $.fn.dragOn = function(){ 
77     return this.each(function(){ 
78         dragStatus[this.id] = 'on'; 
79     }); 
80 }; 
81 $.extend({ 
82     layerSettings:{ 
83         id:"layerdiv", 
84         width:220, 
85         height:220, 
86         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>', 
87         content:'', 
88         title:'', 
89         isbg:true, 
90         opacity:0.3 
91     }, 
92     layerSetup: function( settings ) { 
93         $.extend( $.layerSettings, settings ); 
94         ___settings___[settings.id] = settings; 
95         ___id___ = settings.id; 
96     }, 
97     layershow:function(){        
98         var __bw = $("body").width(); 
99         var __bh = $("body").height() > $(window).height() ? $("body").height() : $(window).height(); 
100         var _width = $.layerSettings.width; 
101         var _height = $.layerSettings.height; 
102          
103         if(document.getElementById(___id___)) return; 
104         var _moveid = ___id___ + "_move"; 
105         var _titleid = ___id___ + "_title"; 
106         var _contentid = ___id___ + "_content"; 
107         var _cssurl = $.layerSettings.cssurl; 
108         var opacity = $.layerSettings.opacity; 
109         __index = $.layermaxindex(); 
110         var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0;
111         var __top = 100; 
112         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>'; 
113         if($.layerSettings.isbg) 
114         { 
115             $("body").append(__bgDiv); 
116         } 
117         $("body").append('<div id="'+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>'); 
118         var _templete = $.layerSettings.templete; 
119         var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid); 
120         $("#"+___id___).append(__templete); 
121         $("#"+_contentid).append($.layerSettings.content); 
122         $("#"+_titleid).append($.layerSettings.title); 
123         var idd = ___id___; 
124         $(".layerclose").bind("click",function() 
125         { 
126             $.layerclose(idd); 
127         }); 
128         $("#"+___id___).bind("click",function() 
129          { 
130              var id = this.id; 
131              $.layerSetup(___settings___[id]); 
132             $(this).css("z-index",$.layermaxindex());  
133          }); 
134         $(document).bind("click",function(e) 
135          { 
136             var pos = $.getMousePosition(e); 
137              
138          }); 
139         $(document).mousemove(function(e){                                           
140             if(isMouseDown && dragStatus[currentElement.id] != 'false'){ 
141                 $.updatePosition(e); 
142                 if(dragCallbacks[currentElement.id] != undefined){ 
143                     dragCallbacks[currentElement.id](e, currentElement); 
144                 } 
145                 return false; 
146             } 
147         }); 
148         $(document).mouseup(function(e){ 
149             if(isMouseDown && dragStatus[currentElement.id] != 'false'){ 
150                 isMouseDown = false; 
151                 if(dropCallbacks[currentElement.id] != undefined){ 
152                     dropCallbacks[currentElement.id](e, currentElement); 
153                 } 
154                 return false; 
155             } 
156         }); 
157         (function(){ 
158             bubblings[___id___] = true; 
159 
160             dragStatus[___id___] = "on"; 
161              
162             //setHandler
163             bubblings[this.id] = true; 
164              
165             dragStatus[_moveid] = "handler"; 
166 
167             $("#"+_moveid).css("cursor", "move");    
168 
169             $("#"+_moveid).mousedown(function(e){ 
170                 var id = this.id.replace("_move",""); 
171                 ___id___ = id; 
172                 $("#"+id).css("z-index",$.layermaxindex()); 
173                 $.layerSetup(___settings___[id]); 
174                 if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler)) 
175                     return bubblings["#"+___id___]; 
176                  
177                 isMouseDown    = true; 
178                 currentElement = $("#"+___id___); 
179 
180                 var pos    = $.getMousePosition(e); 
181                 lastMouseX = pos.x; 
182                 lastMouseY = pos.y; 
183 
184                 lastElemTop  = document.getElementById(___id___).offsetTop; 
185                 lastElemLeft = document.getElementById(___id___).offsetLeft; 
186 
187                 $.updatePosition(e); 
188                 holdingHandler = true; 
189             }); 
190              
191             $("#"+_moveid).mouseup(function(e){ 
192                 holdingHandler = false; 
193             }); 
194             //end setHandler
195         })(); 
196     }, 
197     layerclose:function(__id) 
198     { 
199         $("#"+__id+"_background").remove(); 
200         $("#"+__id).remove(); 
201     }, 
202     layermaxindex:function() 
203     { 
204         var ___index = 0; 
205         $.each($("*"),function(i,n){ 
206              var __tem = $(n).css("z-index"); 
207              if(__tem>0) 
208              { 
209                 if(__tem > ___index) 
210                 { 
211                     ___index = __tem + 1;    
212                 } 
213              } 
214          }); 
215         return ___index; 
216     } 
217 }); 
218 })(jQuery);

219 


 

使用方法：

（1）显示层：

function show() 
{ 
$.layerSetup({ 
                 id:"abc",//弹出层的ID
                 title:"test",//标题
                 content:'test',//内容
                 isbg:false,//是否显示背景遮照层
                 opacity:0.3,//背景遮照层的透明度，值越大透明度越低，0为完全透明，1为不透明
                 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>'//模板
                 }); 
$.layershow(); 
}

 

 

（2）关闭层：

  1. $.layerclose("弹出层的ID");

 

注意：那个如果你的模板有CSS文件的话，就要直接引入到本页面就行了，这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了。

相关代码请到http://download.csdn.net/source/678185下载
posted on 2008-10-16 10:12  东子  阅读(7603)  评论(15)  编辑  收藏  举报