|
JavaScrip. Не отображаются изображения в календаре.
#36508016
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Есть такой вот календарь tigra calendar.
Скрипт календаря находется по адресу: js/calendar/calendar.js, изображния js/calendar/img.
В корене лежит ХТМЛ документ index.html
Код index.html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<html>
<head>
<!-- link calendar files -->
<script language="JavaScript" src="js/calendar/calendar.js"></script>
<link rel="stylesheet" href="css/calendar.css">
</head>
<body>
<form name="testform">
<!-- calendar attaches to existing form element -->
<input type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>
</form>
</body>
</html>
а вот calendar.js:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
// Tigra Calendar v4. 0 . 3 ( 01 / 12 / 2009 ) American (mm/dd/yyyy)
// http://www.softcomplex.com/products/tigra_calendar/
// Public Domain Software... You're welcome.
// default settins
var A_TCALDEF = {
'months' : ['Січень', 'Лютий', 'Березень', 'Квітень', 'Травень', 'Червень', 'Липень', 'Серпень', 'Вересень', 'Жовтень', 'Листопад', 'Грудень'],
'weekdays' : ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд'],
'yearscroll': true, // show year scroller
'weekstart': 0, // first day of week: 0-Пн or 1-Вт
'centyear' : 70, // 2 digit years less than 'centyear' are in 20xx, othewise in 19xx.
'imgpath' : 'img/' // directory with calendar images
}
// date parsing function
function f_tcalParseDate (s_date) {
var re_date = /^\s*(\d{1,2})\/(\d{1,2})\/(\d{2,4})\s*$/;
if (!re_date.exec(s_date))
return alert ("Invalid date: '" + s_date + "'.\nAccepted format is mm/dd/yyyy.")
var n_day = Number(RegExp.$2),
n_month = Number(RegExp.$1),
n_year = Number(RegExp.$3);
if (n_year < 100)
n_year += (n_year < this.a_tpl.centyear ? 2000 : 1900);
if (n_month < 1 || n_month > 12)
return alert ("Invalid month value: '" + n_month + "'.\nAllowed range is 01-12.");
var d_numdays = new Date(n_year, n_month, 0);
if (n_day > d_numdays.getDate())
return alert("Invalid day of month value: '" + n_day + "'.\nAllowed range for selected month is 01 - " + d_numdays.getDate() + ".");
return new Date (n_year, n_month - 1, n_day);
}
// date generating function
function f_tcalGenerDate (d_date) {
return (
(d_date.getMonth() < 9 ? ' 0 ' : '') + (d_date.getMonth() + 1) + "/"
+ (d_date.getDate() < 10 ? ' 0 ' : '') + d_date.getDate() + "/"
+ d_date.getFullYear()
);
}
// implementation
function tcal (a_cfg, a_tpl) {
// apply default template if not specified
if (!a_tpl)
a_tpl = A_TCALDEF;
// register in global collections
if (!window.A_TCALS)
window.A_TCALS = [];
if (!window.A_TCALSIDX)
window.A_TCALSIDX = [];
this.s_id = a_cfg.id ? a_cfg.id : A_TCALS.length;
window.A_TCALS[this.s_id] = this;
window.A_TCALSIDX[window.A_TCALSIDX.length] = this;
// assign methods
this.f_show = f_tcalShow;
this.f_hide = f_tcalHide;
this.f_toggle = f_tcalToggle;
this.f_update = f_tcalUpdate;
this.f_relDate = f_tcalRelDate;
this.f_parseDate = f_tcalParseDate;
this.f_generDate = f_tcalGenerDate;
// create calendar icon
this.s_iconId = 'tcalico_' + this.s_id;
this.e_icon = f_getElement(this.s_iconId);
if (!this.e_icon) {
document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS[\'' + this.s_id + '\'].f_toggle()" class="tcalIcon" alt="Open Calendar" />');
this.e_icon = f_getElement(this.s_iconId);
}
// save received parameters
this.a_cfg = a_cfg;
this.a_tpl = a_tpl;
}
function f_tcalShow (d_date) {
// find input field
if (!this.a_cfg.controlname)
throw("TC: control name is not specified");
if (this.a_cfg.formname) {
var e_form = document.forms[this.a_cfg.formname];
if (!e_form)
throw("TC: form '" + this.a_cfg.formname + "' can not be found");
this.e_input = e_form.elements[this.a_cfg.controlname];
}
else
this.e_input = f_getElement(this.a_cfg.controlname);
if (!this.e_input || !this.e_input.tagName || this.e_input.tagName != 'INPUT')
throw("TC: element '" + this.a_cfg.controlname + "' does not exist in "
+ (this.a_cfg.formname ? "form '" + this.a_cfg.controlname + "'" : 'this document'));
// dynamically create HTML elements if needed
this.e_div = f_getElement('tcal');
if (!this.e_div) {
this.e_div = document.createElement("DIV");
this.e_div.id = 'tcal';
document.body.appendChild(this.e_div);
}
this.e_shade = f_getElement('tcalShade');
if (!this.e_shade) {
this.e_shade = document.createElement("DIV");
this.e_shade.id = 'tcalShade';
document.body.appendChild(this.e_shade);
}
this.e_iframe = f_getElement('tcalIF')
if (b_ieFix && !this.e_iframe) {
this.e_iframe = document.createElement("IFRAME");
this.e_iframe.style.filter = 'alpha(opacity= 0 )';
this.e_iframe.id = 'tcalIF';
this.e_iframe.src = this.a_tpl.imgpath + 'pixel.gif';
document.body.appendChild(this.e_iframe);
}
// hide all calendars
f_tcalHideAll();
// generate HTML and show calendar
this.e_icon = f_getElement(this.s_iconId);
if (!this.f_update())
return;
this.e_div.style.visibility = 'visible';
this.e_shade.style.visibility = 'visible';
if (this.e_iframe)
this.e_iframe.style.visibility = 'visible';
// change icon and status
this.e_icon.src = this.a_tpl.imgpath + 'no_cal.gif';
this.e_icon.title = 'Close Calendar';
this.b_visible = true;
}
function f_tcalHide (n_date) {
if (n_date)
this.e_input.value = this.f_generDate(new Date(n_date));
// no action if not visible
if (!this.b_visible)
return;
// hide elements
if (this.e_iframe)
this.e_iframe.style.visibility = 'hidden';
if (this.e_shade)
this.e_shade.style.visibility = 'hidden';
this.e_div.style.visibility = 'hidden';
// change icon and status
this.e_icon = f_getElement(this.s_iconId);
this.e_icon.src = this.a_tpl.imgpath + 'cal.gif';
this.e_icon.title = 'Open Calendar';
this.b_visible = false;
}
function f_tcalToggle () {
return this.b_visible ? this.f_hide() : this.f_show();
}
function f_tcalUpdate (d_date) {
var d_today = this.a_cfg.today ? this.f_parseDate(this.a_cfg.today) : f_tcalResetTime(new Date());
var d_selected = this.e_input.value == ''
? (this.a_cfg.selected ? this.f_parseDate(this.a_cfg.selected) : d_today)
: this.f_parseDate(this.e_input.value);
// figure out date to display
if (!d_date)
// selected by default
d_date = d_selected;
else if (typeof(d_date) == 'number')
// get from number
d_date = f_tcalResetTime(new Date(d_date));
else if (typeof(d_date) == 'string')
// parse from string
this.f_parseDate(d_date);
if (!d_date) return false;
// first date to display
var d_firstday = new Date(d_date);
d_firstday.setDate(1);
d_firstday.setDate(1 - (7 + d_firstday.getDay() - this.a_tpl.weekstart) % 7);
var a_class, s_html = '<table class="ctrl"><tbody><tr>'
+ (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, -1, 'y') + ' title="Previous Year"><img src="' + this.a_tpl.imgpath + 'prev_year.gif" /></td>' : '')
+ '<td' + this.f_relDate(d_date, -1) + ' title="Previous Month"><img src="' + this.a_tpl.imgpath + 'prev_mon.gif" /></td><th>'
+ this.a_tpl.months[d_date.getMonth()] + ' ' + d_date.getFullYear()
+ '</th><td' + this.f_relDate(d_date, 1) + ' title="Next Month"><img src="' + this.a_tpl.imgpath + 'next_mon.gif" /></td>'
+ (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, 1, 'y') + ' title="Next Year"><img src="' + this.a_tpl.imgpath + 'next_year.gif" /></td></td>' : '')
+ '</tr></tbody></table><table><tbody><tr class="wd">';
// print weekdays titles
for (var i = 0; i < 7; i++)
s_html += '<th>' + this.a_tpl.weekdays[(this.a_tpl.weekstart + i) % 7] + '</th>';
s_html += '</tr>' ;
// print calendar table
var n_date, n_month, d_current = new Date(d_firstday);
while (d_current.getMonth() == d_date.getMonth() ||
d_current.getMonth() == d_firstday.getMonth()) {
// print row heder
s_html +='<tr>';
for (var n_wday = 0; n_wday < 7; n_wday++) {
a_class = [];
n_date = d_current.getDate();
n_month = d_current.getMonth();
// other month
if (d_current.getMonth() != d_date.getMonth())
a_class[a_class.length] = 'othermonth';
// weekend
if (d_current.getDay() == 0 || d_current.getDay() == 6)
a_class[a_class.length] = 'weekend';
// today
if (d_current.valueOf() == d_today.valueOf())
a_class[a_class.length] = 'today';
// selected
if (d_current.valueOf() == d_selected.valueOf())
a_class[a_class.length] = 'selected';
s_html += '<td onclick="A_TCALS[\'' + this.s_id + '\'].f_hide(' + d_current.valueOf() + ')"' + (a_class.length ? ' class="' + a_class.join(' ') + '">' : '>') + n_date + '</td>'
d_current.setDate(++n_date);
while (d_current.getDate() != n_date && d_current.getMonth() == n_month) {
d_current.setHours(d_current.getHours + 1);
d_current = f_tcalResetTime(d_current);
}
}
// print row footer
s_html +='</tr>';
}
s_html +='</tbody></table>';
// update HTML, positions and sizes
this.e_div.innerHTML = s_html;
var n_width = this.e_div.offsetWidth;
var n_height = this.e_div.offsetHeight;
var n_top = f_getPosition (this.e_icon, 'Top') + this.e_icon.offsetHeight;
var n_left = f_getPosition (this.e_icon, 'Left') - n_width + this.e_icon.offsetWidth;
if (n_left < 0) n_left = 0;
this.e_div.style.left = n_left + 'px';
this.e_div.style.top = n_top + 'px';
this.e_shade.style.width = (n_width + 8) + 'px';
this.e_shade.style.left = (n_left - 1) + 'px';
this.e_shade.style.top = (n_top - 1) + 'px';
this.e_shade.innerHTML = b_ieFix
? '<table><tbody><tr><td rowspan="2" colspan="2" width="6"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_tr.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_mr.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bl.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_br.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tbody></table>'
: '<table><tbody><tr><td rowspan="2" width="6"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td rowspan="2"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td width="7" height="7"><img src="' + this.a_tpl.imgpath + 'shade_tr.png"></td></tr><tr><td background="' + this.a_tpl.imgpath + 'shade_mr.png" height="' + (n_height - 7) + '"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td><img src="' + this.a_tpl.imgpath + 'shade_bl.png"></td><td background="' + this.a_tpl.imgpath + 'shade_bm.png" height="7" align="left"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td><img src="' + this.a_tpl.imgpath + 'shade_br.png"></td></tr><tbody></table>';
if (this.e_iframe) {
this.e_iframe.style.left = n_left + 'px';
this.e_iframe.style.top = n_top + 'px';
this.e_iframe.style.width = (n_width + 6) + 'px';
this.e_iframe.style.height = (n_height + 6) +'px';
}
return true;
}
function f_getPosition (e_elemRef, s_coord) {
var n_pos = 0, n_offset,
e_elem = e_elemRef;
while (e_elem) {
n_offset = e_elem["offset" + s_coord];
n_pos += n_offset;
e_elem = e_elem.offsetParent;
}
// margin correction in some browsers
if (b_ieMac)
n_pos += parseInt(document.body[s_coord.toLowerCase() + 'Margin']);
else if (b_safari)
n_pos -= n_offset;
e_elem = e_elemRef;
while (e_elem != document.body) {
n_offset = e_elem["scroll" + s_coord];
if (n_offset && e_elem.style.overflow == 'scroll')
n_pos -= n_offset;
e_elem = e_elem.parentNode;
}
return n_pos;
}
function f_tcalRelDate (d_date, d_diff, s_units) {
var s_units = (s_units == 'y' ? 'FullYear' : 'Month');
var d_result = new Date(d_date);
d_result['set' + s_units](d_date['get' + s_units]() + d_diff);
if (d_result.getDate() != d_date.getDate())
d_result.setDate(0);
return ' onclick="A_TCALS[\'' + this.s_id + '\'].f_update(' + d_result.valueOf() + ')"';
}
function f_tcalHideAll () {
for (var i = 0; i < window.A_TCALSIDX.length; i++)
window.A_TCALSIDX[i].f_hide();
}
function f_tcalResetTime (d_date) {
d_date.setHours(0);
d_date.setMinutes(0);
d_date.setSeconds(0);
d_date.setMilliseconds(0);
return d_date;
}
f_getElement = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) };
if (document.addEventListener)
window.addEventListener('scroll', f_tcalHideAll, false);
if (window.attachEvent)
window.attachEvent('onscroll', f_tcalHideAll);
// global variables
var s_userAgent = navigator.userAgent.toLowerCase(),
re_webkit = /WebKit\/(\d+)/i;
var b_mac = s_userAgent.indexOf('mac') != -1,
b_ie5 = s_userAgent.indexOf('msie 5 ') != -1,
b_ie6 = s_userAgent.indexOf('msie 6 ') != -1 && s_userAgent.indexOf('opera') == - 1 ;
var b_ieFix = b_ie5 || b_ie6,
b_ieMac = b_mac && b_ie5,
b_safari = b_mac && re_webkit.exec(s_userAgent) && Number(RegExp.$ 1 ) < 500 ;
Не отображается только изображение cal.gif. В чем проблема? |
|
|
