?? calendar.lib.js
字號(hào):
?/*
By Hangring
#2007.12.27#
---
use list:
> global.lib.js
> browser.lib.js
> events.lib.js
> node.lib.js
> css.lib.js
> popup.lib.js
---
日歷
---
包含樣式:
<link rel="stylesheet" href="css/calendar.lib.css" type="text/css" />
*/
function Calendar () {
// container
this.container = null;
//
this.upper = null;
this.up = null;
this.current = null;
this.down = null;
this.downer = null;
this.weekContentContainer = null;
// shortcur object
this.shortCut = null;
this.shortCutContent = null;
// calendar enable control or not
this.isControl = false;
// selected `li` object
this.selectedItem = null;
// current selected date
this.selectedDate = new Date();
// current show year
this.showYear = this.selectedDate.getFullYear();
// current show month
this.showMonth = this.selectedDate.getMonth();
// current selected day
this.showDay = this.selectedDate.getDate();
// shortcut year & month content object
this.yearContent = null;
this.monthContent = null;
// shortcut selected year & month
this.shortcutYear = this.showYear;
this.shortcutMonth = this.showMonth;
this.yearStep = 1950;
// css
this.css = {
// 容器
calendar:'calendar',
// 控制欄
control:'control',
// <<
upper:'upper',
// <
up:'up',
// 當(dāng)前日期
current:'current',
// >
down:'down',
// >>
downer:'downer',
// 周,日
week:'week',
// 針對(duì)ie5.5及以下
week_ie5:'week-ie5',
// 周標(biāo)題
week_title:'wtitle',
// 周內(nèi)容
week_content:'wcontent',
// 當(dāng)前日
// 移過(guò)
over:'over',
// 移出
out:'out',
/* 快捷層 */
// 快捷
shortcut:'shortcut',
// 標(biāo)題
shortcut_title:'shortcut-title',
// 標(biāo)題狀態(tài)
selected:'selected',
unselected:'unselected',
// 內(nèi)容
shortcut_content:'shortcut-content',
// 針對(duì)ie5.5及以下
shortcut_content_ie5:'shortcut-content-ie5',
// 特定年被選擇
content_selected:'content-selected',
content_unselected:'content-unselected'
};
}
Calendar.Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
Calendar.Months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
// 初始化
Calendar.prototype.Init = function () {
this.container = oNode.CreateNode('div');
this.container.id = 'calendar';
CSS.AddClass(this.container, this.css.calendar);
this.CreateContent(this.showYear, this.showMonth);
//this.CreateWeekContent(this.showYear, this.showMonth);
this.Create(this.showYear, this.showMonth);
};
Calendar.prototype.CreateContent = function (Y, M) {
var self = this;
var content = this.content = oNode.CreateNode('ul');
oNode.AddNode(content, this.container);
CSS.AddClass(content, this.css.control);
// previous year
var upper = this.upper = oNode.CreateNode('li');
oNode.AddNode(upper, content);
CSS.AddClass(upper, this.css.upper);
// previous month
var up = this.up = oNode.CreateNode('li');
oNode.AddNode(up, content);
CSS.AddClass(up, this.css.up);
// current date
var current = this.current = oNode.CreateNode('li');
oNode.AddNode(current, content);
CSS.AddClass(current, this.css.current);
// next month
var down = this.down = oNode.CreateNode('li');
oNode.AddNode(down, content);
CSS.AddClass(down, this.css.down);
// next year
var downer = this.downer = oNode.CreateNode('li');
oNode.AddNode(downer, content);
CSS.AddClass(downer, this.css.downer);
if (!!this.isControl) {
oNode.AddNode(oNode.CreateTextNode('<<'), upper);
Events.AttachEvent(upper, 'click', function (e, th) {
th = th || this;
self.SetShowDate(th.Y, th.M);
self.Create(th.Y, th.M);
self.ChangeShortCutYear(th.Y);
self._ContentChange();
});
oNode.AddNode(oNode.CreateTextNode('<'), up);
Events.AttachEvent(up, 'click', function (e, th) {
th = th || this;
self.SetShowDate(th.Y, th.M);
self.Create(th.Y, th.M);
self.ChangeShortCutMonth(th.M);
self._ContentChange();
});
// 當(dāng)前時(shí)間
Events.AttachEvent(current, 'click', function () {
var curDate = new Date();
//if (self.showYear == curDate.getFullYear() &&
// self.showMonth == curDate.getMonth() &&
// self.showDay == curDate.getDate()) return;
self.selectedDate = curDate;
self.Create(curDate.getFullYear(), curDate.getMonth());
self.ChangeShortCutState();
self._ContentChange();
});
Events.AttachEvent(current, 'mouseover', function () {
clearTimeout(self.shortCut.timer);
self.CreatShortCut();
self.SetVisible(true);
//CSS.SetDisplay(self.shortCutContent, true);
///
self.ChangeShortCutState(self.showYear, self.showMonth);
});
Events.AttachEvent(current, 'mouseout', function () {
self.shortCut.timer = setTimeout(function(){
self.SetVisible(false);
//CSS.SetDisplay(self.shortCutContent, false);
}, 1000);
});
oNode.AddNode(oNode.CreateTextNode('>'), down);
Events.AttachEvent(down, 'click', function (e, th) {
th = th || this;
self.SetShowDate(th.Y, th.M);
self.Create(th.Y, th.M);
self.ChangeShortCutMonth(th.M);
self._ContentChange();
});
oNode.AddNode(oNode.CreateTextNode('>>'), downer);
Events.AttachEvent(downer, 'click', function (e, th) {
th = th || this;
self.SetShowDate(th.Y, th.M);
self.Create(th.Y, th.M);
self.ChangeShortCutYear(th.Y);
self._ContentChange();
});
}
// show shortcur
var shortCut = this.shortCut = oNode.CreateNode('div');
oNode.AddNode(shortCut, this.container);
shortCut.style.position = 'relative';
shortCut.style.clear = 'both';
shortCut.timer = 0;
// ie5.5 及下版本
var css_ie5 = Browser.IsIE5 ? this.css.week_ie5 : '';
// week title
var weekTitle = oNode.CreateNode('ul');
oNode.AddNode(weekTitle, this.container);
CSS.AddClass(weekTitle, this.css.week, this.css.week_title, css_ie5);
weekTitle.innerHTML = "<li>日<\/li><li>一<\/li><li>二<\/li><li>三<\/li><li>四<\/li><li>五<\/li><li>六<\/li>";
// week content
this.weekContentContainer = oNode.CreateNode('div');
oNode.AddNode(this.weekContentContainer, this.container);
// clear float
var clear = oNode.CreateNode('div');
oNode.AddNode(clear, this.container);
clear.style.clear = 'left';
//CSS.AddClass(clear, 'calendar-clear');
}
// create week content
Calendar.prototype.CreateWeekContent = function (Y, M) {
var self = this;
// ie5.5 及下版本
var css_ie5 = Browser.IsIE5 ? this.css.week_ie5 : '';
var curDate = new Date(Y, M, 1);
//curDate.setFullYear(Y, M, 1);
// 當(dāng)前月的第一天是星期幾
var firstDay = curDate.getDay();
this.weekContentContainer.innerHTML = '';
var weekContent = oNode.CreateNode('ul');
oNode.AddNode(weekContent, this.weekContentContainer);
CSS.AddClass(weekContent, this.css.week, this.css.week_content, css_ie5);
var i = 0;
var days = Calendar.Days;
while (1) {
var day = oNode.CreateNode('li');
oNode.AddNode(day, weekContent);
var _day;
if (firstDay <= i && i < firstDay + days[M]) {
_day = day._day = i - firstDay + 1;
if (_day == this.selectedDate.getDate()/* || (M == 1 && _day == days[M])*/) {
this.selectedItem = day;
CSS.AddClass(day, this.css.current_day);
}
oNode.AddNode(oNode.CreateTextNode(_day), day);
Events.AttachEvent(day, 'click', function (e, th) {
th = th || this;
CSS.RemoveClass(self.selectedItem, self.css.current_day);
self.selectedItem = th;
CSS.AddClass(self.selectedItem, self.css.current_day);
curDate.setFullYear(Y, M, th._day);
self._Change(curDate);
});
Events.AttachEvent(day, 'mouseover', function (e, th) {
th = th || this;
CSS.ReplaceClass(th, self.css.out, self.css.over);
});
Events.AttachEvent(day, 'mouseout', function (e, th) {
th = th || this;
CSS.ReplaceClass(th, self.css.over, self.css.out);
});
}
if ((i + 1) % 7 == 0) {
if(i >= firstDay + days[M] - 1) {
break;
}
weekContent = oNode.CreateNode('ul');
oNode.AddNode(weekContent, this.weekContentContainer);
CSS.AddClass(weekContent, this.css.week, this.css.week_content, css_ie5);
}
i++;
}
};
// 顯示主日歷框架
Calendar.prototype.Create = function (Y, M) {
?? 快捷鍵說(shuō)明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -