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);
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();
}
{
$.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）关闭层：
- $.layerclose("弹出层的ID");
注意：那个如果你的模板有CSS文件的话，就要直接引入到本页面就行了，这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了。
- 相关代码请到http://download.csdn.net/source/678185下载