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 220,
85 height:220,
86 templete:'<div style="height:20px; @width@px; background-color:#777777;"><span id="@moveid@" style="position:relative; left:0px; top:0px; height:20px; 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@px; height:@height@px;"><div style="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+'; '+__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);