看了博友auntion的【擅用事件代理，警惕闭包的性能陷阱】真是一语惊醒梦中人的感觉

之前写过一个日历控件，现在回头看了一下代码，简直就是一坨屎

今天抽个时间，用事件代理模式重写了一下

代码

  1 Date.prototype.Add = function () {
  2     if (arguments[0] !== undefined)
  3         this.setTime(this.getTime() + (60 * 60 * 24 * 1000 * parseInt(arguments[0])));
  4     return this;
  5 };
  6 Date.prototype.format = function () {
  7     var y = this.getFullYear();
  8     var m = this.getMonth() + 1;
  9     var d = this.getDate();
10     if (arguments[0] !== undefined)
11         return arguments[0].replace("MM", m).replace("dd", d).replace("yyyy", y);
12     return m + "/" + d + "/" + y;
13 };
14 Date.prototype.convert = function () {
15     if (arguments[0] !== undefined && arguments[0] !== "")
16         return new Date(arguments[0]);
17     return this;
18 };
19 var Calendar = (function () {
20     var that = this;
21     var zIndex = 1000;
22     var monthRow = 0;
23     var Week = ["<font color='red'>Sun</font>", "Mon", "Tue", "Wed", "Thur", "Fri", "<font color='red'>Sat</font>"];
24     var Month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
25     var MonthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
26     var tdStyle = "font-size: 12px;height: 18px;font-family: verdana, arial, helvetica;";
27     var thStyle = "font-size: 11px;height: 20px;font-family: verdana, arial, helvetica;background-color:#ebf4fc;width:30px";
28     var selStyle = "color:black; background:white; font-family:verdana, arial, helvetica; font-size:11px;  BORDER-BOTTOM:#DDE3E6 solid 1px; BORDER-LEFT:#ADC3C6 solid 1px; BORDER-RIGHT:#DDE3E6 solid 1px; BORDER-TOP:#ADC3C6 solid 1px;";
29     var ImgArr = { closeBtn: "images/button_close.gif", navLeft: "images/navLeft.gif", Left: "images/left.gif", navRight: "images/navRight.gif", Right: "images/right.gif", yclose: "images/yclose.gif" };
30     var getPosXY = function (e) {
31         if (e) {
32             var rect = e.getBoundingClientRect();
33             var top = rect.top + document.documentElement.scrollTop - document.documentElement.clientTop + e.offsetHeight;
34             var left = rect.left + document.documentElement.scrollLeft - document.documentElement.clientLeft;
35             if (document.all) {
36                 top -= 2;
37                 left -= 2;
38             }
39             return { top: top, left: left };
40         }
41         else
42             return { top: 0, left: 0 };
43     };
44     var currentDate = new Date();
45     var currentInput = null;
46     var currentCallback = null;
47     var bodyCalendar = function () {
48         var html = "";
49         html += '<div id="__viewdiv" style="position: absolute; display: none; width: 210px; height: 150px;cursor:pointer;z-index: ' + (zIndex++) + ';background-color:white;border:1px solid #6D84B4">';
50         html += '<div style="background-color:#6D84B4;padding:0px 3px;height:25px;line-height:25px;">';
51         html += '<div style="width:88%;float:left;text-align:left;padding:3px 0px;"><table cellspacing="0" cellpadding="0" style="width:100%" align="center">';
52         html += '<tr><td><img src="' + ImgArr.navLeft + '" name="navLeft"></td><td><img src="' + ImgArr.Left + '" name="left"></td>';
53         html += '<td>';
54         html += '<span style="' + tdStyle + ';width:70px;" id="__monthSpan">' + Month[(currentDate.getMonth())] + '</span>';
55         html += '</td><td>';
56         html += '<span style="' + tdStyle + '" id="__yearSpan">' + currentDate.getFullYear() + '</span>';
57         html += '</td><td><img src="' + ImgArr.Right + '" name="right"></td><td><img src="' + ImgArr.navRight + '" name="navRight"></td>';
58         html += '</tr></table></div>';
59         html += '<div style="width:12%;float:right;text-align:right;padding:3px 0px;"><img name="btnClose" src="' + ImgArr.closeBtn + '"></div>';
60         html += '</div>';
61         html += '<div id="__calendar" style="cursor:pointer">';
62         html += infoCalendar();
63         html += '</div>';
64         html += '<div style="background-color:#ebf4fc;height:18px;line-height:18px;text-align:right;font-family:verdana, arial, helvetica; font-size:11px;">Today: ' + new Date().format() + ' </div>';
65         html += '</div>';
66         return html;
67     };
68     var infoCalendar = function () {
69         var dateStr = currentDate;
70         var y = parseInt(dateStr.getFullYear());
71         var m = parseInt(dateStr.getMonth());
72         var d = parseInt(dateStr.getDate());
73         dateStr = new Date((m + 1) + "/1/" + y);
74         var dayofweek = parseInt(dateStr.getDay());
75         function buildTH(vle, style) {
76             return '<th style="' + style + '">' + vle + '</th>';
77         }
78         var html = "";
79         html += '<table style="border-collapse: collapse;border: 1px solid #ccffff" cellspacing="0" cellpadding="0" width="100%" align="center" border="1">';
80         html += '<tr>';
81         for (var i = 0, len = Week.length; i < len; i++)
82             html += buildTH(Week[i], thStyle);
83         html += '</tr>';
84         if (m == 1) {
85             if (parseInt(y) % 4 == 0)
86                 MonthDay[m] = 29;
87             else
88                 MonthDay[m] = 28;
89         }
90         var nowprintday = 0;
91         var truedayMonth = MonthDay[m];
92         var html_week = '';
93         for (var j = 0; j < 6; j++) {
94             monthRow = j;
95             dayofweek = parseInt(dateStr.getDay());
96             html_week += '<tr align="center">';
97             for (var w = 0; w < dayofweek; w++) {
98                 if (m == 0)
99                     m = 12;
100                 var x = parseInt(parseInt(MonthDay[m - 1]) - dayofweek + (w + 1));
101                 html_week += '<td style="' + tdStyle + 'width:30px;"><font color="#d3d3d3">' + x + '</font></td>';
102             }
103             for (var tw = dayofweek; tw < 7; tw++) {
104                 nowprintday++;
105                 if (nowprintday == d) {
106                     html_week += '<td name="daytd"  vle="' + ((dateStr.getMonth() + 1) + "/" + nowprintday + "/" + y) + '" style="' + tdStyle + 'background-color:#696969;width:30px;">' + nowprintday + '</td>';
107                 }
108                 else {
109                     html_week += '<td name="daytd" vle="' + ((dateStr.getMonth() + 1) + "/" + nowprintday + "/" + y) + '" style="' + tdStyle + 'width:30px;">' + nowprintday + '</td>';
110                 }
111                 dateStr = dateStr.Add(1);
112                 if (nowprintday >= truedayMonth)
113                     break;
114             }
115             for (var i = 1; i <= (7 - (tw + 1)); i++) {
116                 html_week += '<td style="' + tdStyle + 'width:30px;"><font color="#d3d3d3">' + i + '</font></td>';
117             }
118             html_week += '</tr>';
119             if (nowprintday >= truedayMonth)
120                 break;
121         }
122         html += html_week;
123         html += '</table>';
124         return html;
125     };
126     var GetIndex = function (arr, key) {
127         for (var i = 0; i < arr.length; i++) {
128             if (arr[i] == key)
129                 return i + 1;
130         }
131         return -1;
132     }
133     var SetHeight = function () {
134         if (!document.all) {
135             if (monthRow > 4)
136                 document.getElementById("__viewdiv").style.height = 173 + "px";
137             else
138                 document.getElementById("__viewdiv").style.height = 154 + "px";
139         }
140     };
141     var setCalendarDiv = function (dateStr, calendardiv) {
142         currentDate = new Date().convert(dateStr);
143         calendardiv.innerHTML = bodyCalendar();
144     };
145     var showYearMonth = function (ID, div, target, current) {
146         var yearDiv = document.getElementById(ID);
147         if (!yearDiv) {
148             yearDiv = document.createElement("div");
149             yearDiv.id = ID;
150             div.appendChild(yearDiv);
151             yearDiv.innerHTML = createYearMonth(ID, current);
152         }
153         else
154             yearDiv.innerHTML = createYearMonth(ID, current);
155         var o = getPosXY(target);
156         yearDiv.style.zIndex = zIndex++;
157         yearDiv.style.position = "absolute";
158         yearDiv.style.display = "";
159         yearDiv.style.width = (ID.indexOf("month") >= 0 ? "80px" : "360px");
160         yearDiv.style.top = o.top;
161         yearDiv.style.left = o.left;
162     }
163     var createYearMonth = function (ID, current) {
164         var row, col;
165         if (ID.indexOf("month") >= 0)
166             row = 12, col = 1, mid = GetIndex(Month, document.getElementById("__monthSpan").innerHTML);
167         if (ID.indexOf("year") >= 0)
168             row = 8, col = 9, mid = parseInt(document.getElementById("__yearSpan").innerHTML);
169         var html = '', w = (col == 1 ? 100 : 90) / col;
170         var start = col == 1 ? 1 : current - 40;
171         var end = 0;
172         html += '<table cellspacing="0" cellpadding="0" border="0" style="width:100%;cursor:pointer;background-color:white;border: 1px solid #6D84B4;font-family:verdana, arial, helvetica; font-size:12px;">';
173         html += '<tr>';
174         if (col != 1)
175             html += '<td style="width:3%" valign="midden" align="center"><img src="' + ImgArr.Left + '" name="year_img_left" vle="' + start + '" /></td>';
176         for (var i = 0; i < col; i++) {
177             var yearStart = start + (i * row);
178             var yearEnd = yearStart + row;
179             html += '<td style="width:' + w + '%" align="center">';
180             html += '<table cellspacing="0" cellpadding="0" border="0" style="width:100%;font-family:verdana, arial, helvetica; font-size:12px;">';
181             for (var j = yearStart; j < yearEnd; j++) {
182                 if (mid == j)
183                     html += '<tr><td name="' + (col == 1 ? "monthtd" : "yeartd") + '" vle="' + j + '" style="height:20px;background-color: #6D84B4">' + (col == 1 ? Month[j - 1] : j) + '</td></tr>';
184                 else
185                     html += '<tr><td name="' + (col == 1 ? "monthtd" : "yeartd") + '" vle="' + j + '" style="height:20px;">' + (col == 1 ? Month[j - 1] : j) + '</td></tr>';
186             }
187             html += '</table>';
188             html += '</td>';
189             end = yearEnd;
190         }
191         if (col != 1) {
192             html += '<td style="width:3%" valign="midden" align="center">';
193             html += '<img src="' + ImgArr.Right + '" name="year_img_right" vle="' + end + '" />';
194             html += '</td>';
195         }
196         html += '</tr>';
197         html += '</table>';
198         return html;
199     }
200     var show = function () {
201         var o = getPosXY(currentInput);
202         document.getElementById("__viewdiv").style.top = o.top;
203         document.getElementById("__viewdiv").style.left = o.left;
204         document.getElementById("__viewdiv").style.display = '';
205         SetHeight();
206     }
207     var init = function (dest, today, callbackfn) {
208         if (!dest || dest == "") {
209             alert("No target!");
210             return;
211         }
212         if (typeof dest == "string")
213             dest = document.getElementById(dest);
214         var div = document.getElementById("body_div_temp_");
215         if (!div) {
216             div = document.createElement("div");
217             div.id = "body_div_temp_";
218             document.body.appendChild(div);
219         }
220         var span = document.createElement("span");
221         span.innerHTML = (today && today === 1 ? ' <a href="javascript:void(0);">Today</a>' : "") + ' <img src="images/icon_calendar.gif" />';
222         dest.parentNode.insertBefore(span, dest.nextSibling);
223         span.onclick = (function (obj, callback) {
224             return function () {
225                 currentCallback = callback;
226                 var _event = arguments[0] || window.event;
227                 var target = _event.target || _event.srcElement;
228                 var tagname = target.tagName.toLowerCase();
229                 if (tagname == "a") {
230                     obj.value = new Date().format();
231                     if (typeof currentCallback == "function")
232                         currentCallback();
233                 }
234                 else if (tagname == "img") {
235                     currentInput = obj;
236                     setCalendarDiv(obj.value, div);
237                     show();
238                 }
239                 else
240                     return false;
241             }
242         })(dest, callbackfn);
243         div.onclick = (function (callback) {
244             return function () {
245                 var _event = arguments[0] || window.event;
246                 var target = _event.target || _event.srcElement;
247                 var tagname = target.tagName.toLowerCase();
248                 if (tagname == "td") {
249                     var name = target.getAttribute("name");
250                     var vle = target.getAttribute("vle");
251                     if (name == "daytd") {
252                         currentInput.value = vle
253                         document.getElementById("__viewdiv").style.display = 'none';
254                         if (typeof callback == "function")
255                             callback();
256                     }
257                     else if (name == "yeartd") {
258                         var text = GetIndex(Month, document.getElementById("__monthSpan").innerHTML) + "/" + 1 + "/" + vle;
259                         setCalendarDiv(text, div);
260                         show();
261                     }
262                     else if (name == "monthtd") {
263                         var text = vle + "/" + 1 + "/" + document.getElementById("__yearSpan").innerHTML;
264                         setCalendarDiv(text, div);
265                         show();
266                     }
267                 }
268                 else if (tagname == "img") {
269                     var name = target.getAttribute("name");
270                     var vle = target.getAttribute("vle");
271                     if (name == "btnClose") {
272                         div.innerHTML = "";
273                     }
274                     if (name == "year_img_left" || name == "year_img_right") {
275                         showYearMonth("yearDiv", div, document.getElementById("__yearSpan"), parseInt(vle));
276                     }
277                     if (name == "navLeft" || name == "navRight" || name == "left" || name == "right") {
278                         var y = parseInt(document.getElementById("__yearSpan").innerHTML);
279                         var m = GetIndex(Month, document.getElementById("__monthSpan").innerHTML);
280                         if (name == "navLeft")
281                             y -= 1;
282                         if (name == "navRight")
283                             y += 1;
284                         if (name == "left")
285                             m -= 1;
286                         if (name == "right")
287                             m += 1;
288                         var text = m + "/" + 1 + "/" + y;
289                         setCalendarDiv(text, div);
290                         show();
291                     }
292                 }
293                 else if (tagname == "span") {
294                     if (target.id == '__monthSpan') {
295                         showYearMonth("monthDiv", div, target, GetIndex(Month, target.innerHTML));
296                     }
297                     else if (target.id == "__yearSpan") {
298                         showYearMonth("yearDiv", div, target, parseInt(target.innerHTML));
299                     }
300                 }
301                 else
302                     return false;
303             }
304         })(callbackfn);
305     }
306     var isArray = function (vle) {
307         return Object.prototype.toString.call(vle) === "[object Array]";
308     }
309     that.ready = function (ArrID, today, callbackfn) {
310         if (!isArray(ArrID))
311             ArrID = [ArrID];
312         for (var i = 0, len = ArrID.length; i < len; i++) {
313             init(ArrID[i], today, callbackfn);
314         }
315     }
316     return that;
317 })();

下载地址 /Files/yithcn/Calender.rar

posted on 2011-01-20 18:07 Yithcn 阅读(215) 评论(0) 编辑收藏举报