返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

梅花雨日历控件使用教程

时间:2010-08-06 01:33来源:betway必威官网www.etsupport.net 编辑:麦田守望者

<!--
//----------------------------------------------------------------------------
// 这是WalkingPoison根据梅花雨的日历控件修改发展出来的一个日历 Javascript 页面脚本控件,适用于微软的 IE (5.0以上)浏览器
// 主调用函数是 wpCalendar(this,[object])wpCalendar(this),[object]是控件输出的控件名,举两个例子:
// 一、<input name=txt><input type=button value="Show Calendar" onclick="showCalendar(this,document.all.txt)">
// 二、<input onfocus="showCalendar(this)">
// 本日历的年份限制是(1000 - 9999)
// 按ESC键关闭该控件
// 在年和月的显示地方点击时会分别出年与月的下拉框
// 控件外任意点击一点即可关闭该控件
/* 以下为WalkingPoison的修改说明
WalkingPoison联系方式:walkingpoison@hotmail.com

Ver 2.59
修改日期:2008-6-17
1.*修改对Firefox的兼容性,使其可兼容多浏览器(注意:在FF下运行需要将包含js文件的代码放在<body>中)。此版本尚未完善,完善后升级为2.60版
2.存在问题:样式在两个浏览器还不一致;

Ver 2.55
修改日期:2007-6-26
1.年份的下拉框增加了可选项,用于决定年份的滚动是通过点击还是mouseover来触发

Ver 2.54
修改日期:2006-4-30
1.*将日历单元格的宽度和高度改为变量定义,可以自由定义日历的大小(注意:较大的单元格会使日历响应速度变慢)
2.删除了无用的SELECT样式定义

Ver 2.53
修改日期:2005-11-25
1.增加了拖动出iframe的处理,使得拖动的时候更加不容易停下来(但是在出iframe的同时也出了IE窗口的情况会使得日历移动到左上角)
2.增加了日历中翻年月按钮的双击处理,使得点击的响应更快速
3.在日历对象内使用了self变量来访问自身,而不用依赖于外部创建的wpCalendar实例

Ver 2.52
修改日期:2004-10-9
1.优化了writeCalendar函数及其它的部分代码(增加了抽象的日期对象)
2.显示的提示改为与输出格式完全一致

Ver 2.51
修改日期:2004-9-23, 2004-9-29
1.增加了setYearMonth、setTheme、setYear和setMonth方法,以便外部修改年月的时候调用
2.*重新写了年月的下拉列表,不再使用select控件来选择年月,使得选择年月的操作变得简单
3.增加了Greenbrier主题,删除了无用的Custom主题

Ver 2.5
修改日期:2004-7-23
1.调整了属性和方法的名称
2.增加了themename属性,使得使用代码来修改主题更为方便

Ver 2.5 beta 4
修改日期:2004-4-16, 2004-5-18
1.*增加了调用的方法,最后一个参数允许是一段代码,用于在点击日历以后可以执行需要的代码。
2.修改了一点注释的笔误以及改进了一点代码效率

Ver 2.5 beta 3
1.增加主题可以设置的参数,并在日历版本信息中同时显示主题的版本信息
2.将日历的一些方法集成在日历对象内部,以免与外部函数定义形成冲突
3.增加了DiabloII主题,希望各位喜欢^^
4.优化部分代码

Ver 2.5 beta 2
1.增加鼠标停止在日期上的渐变效果。需要ie5.5以上支持。
2.增加参数设置对以上效果进行自动判断和测试。
3.解决方法一选择日期后产生的焦点小问题。

Ver 2.5 beta
修改日期:2003-10-27
1.*修改日历的初始化方法,可以对多种参数进行设置。
2.*引入主题的概念,便于用户选择或者自由定制主题。
3.*控件已经内置了几个主题,用户可根据需要进行选用。

Ver 2.1+
1.继续修正根据目标在窗口的位置自动调整位置,调整了在窗口右方时的显示问题。

Ver 2.1
1.修正选择月份后下一月的提示内容错误
2.日历根据输出目标在窗口的位置自动调整显示位置。()
3.*自定义输入输出格式,并修改使得输入和输出的格式统一。
4.增加自定义的样式,可以使用"M"和"d",并且日可以空缺。

Ver 2.0
修改日期:2002-12-13
1.*全新修改使用iframe作为日历的载体,不再被select和flash等控件挡住。
2.修正了移植到iframe后移动日历控件的问题。

Ver 1.5
修改日期:2002-12-4
1.选中的日期显示为凹下去的样式
2.修改了关闭层的方法,使得失去焦点的时候能够关闭日历。
3.修改按键处理,使得Tab切换焦点的时候可以关闭控件
4.*可以自定义日历是否可以拖动

Ver 1.4
修改日期:2002-12-3
1.修正选中年/月份下拉框后按Esc键导致年/月份不显示的问题
2.修正使用下拉框选择月份造成的日期错误(字符串转化为数字的问题)
3.*外观样式的改进,使得控件从丑小鸭变成了美丽的天鹅,从灰姑娘变成了高贵的公主,从……(读者可以自己进行恰当的比喻)
4.再次增大年/月份的点击空间,并对下拉框的位置稍作调整

Ver 1.3
修改日期:2002-11-29
1.*空白部分用灰色显示上个月的最后几天和下个月的前几天
2.*每个日期上面加上鼠标提示
3.修改使得当前日期和当前选择的日期的背景色在灰色日期部分也能正常显示

Ver 1.2
修改日期:2002-11-28
1.*修改年和月的点击都把中文包含在内,增大点击的空间
2.当前选择的日期在列表中显示不同的背景色
3.修正了点击单元格之间的分隔线导致控件关闭的问题

Ver 1.1
修改日期:2002-11-15
1.修正了方法二按Esc键关闭以后再次点击不会显示日历的问题
2.点击today直接选中当前的日期并关闭控件
3.*如果调用控件的输入框含有合法日期,则自动显示输入框的日期部分。
4.修改程序统一使用关闭的函数closeCalendar()来关闭日历控件,这样可以通过自定义关闭函数来完成用户自定义的功能。

注:*号表示比较关键的改动
*/

document.writeln('<iframe id=wpCalendarLayer name=wpCalendarLayer frameborder=0 onmouseout="wpCalendar.correctPosition()" style="position: absolute; width: 153; height: 208; z-index: 9998; display: none"></iframe>');

var wpConsts = new function(){
this._isIE = (navigator.userAgent.indexOf("MSIE")>0);
this.MouseButton = this._isIE?{
LEFTBUTTON : 1,
RIGHTBUTTON : 0,
MIDDLEBUTTON: 4
}:
{
LEFTBUTTON : 0,
RIGHTBUTTON : 2,
MIDDLEBUTTON: 1
};
};

var wpEvents = new function(){
var self = this;
this.arrEvents = [];
this.addListener = function(obj, eventName, oCallback){
var ret;
if(wpConsts._isIE){
ret = obj.attachEvent("on" + eventName, oCallback);
}
else{
ret = obj.addEventListener(eventName, oCallback, false);
}
if(ret)this.arrEvents.push({"obj":obj, "eventName": eventName, "oCallback":oCallback});
return ret;
};

this.clearListener = function(obj, eventName){
for(var i=0;i<this.arrEvents.length;i++){
if(this.arrEvents[i].obj == obj && this.arrEvents[i].eventName == eventName){
this.removeListener(obj, eventName, this.arrEvents[i].oCallback);
}
}
};

this.removeListener = function(obj, eventName, oCallback){
if(wpConsts._isIE){
obj.detachEvent("on" + eventName, oCallback);
}
else{
obj.removeEventListener(eventName, oCallback, true);
}
};

this.initWinEvents = function(oWin){
if(!oWin)return;
__firefox(oWin);
};

/*使得firefox兼容IE的event*/
function __firefox(oWin){
if(!oWin)oWin = window;
HTMLElement.prototype.__defineGetter__("runtimeStyle", self.__element_style);
oWin.constructor.prototype.__defineGetter__("event", function(){return self.__window_event(oWin);});
Event.prototype.__defineGetter__("srcElement", self.__event_srcElement);
}
this.__element_style = function(){
return this.style;
}
this.__window_event = function(oWin){
return __window_event_constructor();
}
this.__event_srcElement = function(){
return this.target;
}
function __window_event_constructor(oWin){
if(!oWin)oWin = window;
if(document.all){
return oWin.event;
}
var _caller = __window_event_constructor.caller;
while(_caller!=null){
var _argument = _caller.arguments[0];
if(_argument){
var _temp = _argument.constructor;
if(_temp.toString().indexOf("Event")!=-1){
return _argument;
}
}
_caller = _caller.caller;
}
return null;
}
if(window.addEventListener){
__firefox();
}
/*end firefox*/
};


function wpCalendar(){
//==================================================== 参数设定部分 =======================================================
this.bmoveable = true; //设置日历是否可以拖动
this.datestyle = "yyyy-M-d"; //added in Ver 2.1
this.cellwidth = 21; //设置单个单元格的宽度
this.cellheight = 20; //设置单元格的高度
this.versioninfo= "wpCanlendar Version:2.59&#13;作者:WalkingPoison"; //版本信息
this.tgtObject = null;
this.srcButton = null; //点击的按钮
this.outerDate = ""; //存放对象的日期
this.oCalendar = window.frames.wpCalendarLayer.document; //存放日历对象
this.Style = document.getElementById("wpCalendarLayer").style; //存放日历层的style
this.MonthinMM = this.datestyle.indexOf("MM")>=0?true:false; //added in Ver 2.1
this.Dateindd = this.datestyle.indexOf("dd")>=0?true:false;
this.themename = "Classic"; //主题设置,决定日历的外观
this.theme = null; //根据主题设置得到对应的主题,在redraw函数中根据themename自动设置
this.ScrollYearOnClick = false; //设置年的下拉选择框内的年份是通过点击还是mouseover来滚动

try{this.IE6 = (parseFloat(window.navigator.appVersion.match(/MSIE (\d+\.\d+)/)[1])>=5.5)}
catch(e){this.IE6 = false}
this.testspeed = false; //测试机器速度,以便自动决定是否使用Filter。如果设置为true,则下面的playfilter参数设置无效。
this.testtimeout= 120; //测试标准,单位是毫秒,小于这个数值的就认为机器速度足够快
this.playfilter = this.IE6; //设置是否使用Filter

this.year = new Date().getFullYear(); //定义年的变量的初始值
this.month = new Date().getMonth()+1; //定义月的变量的初始值
this.date = new Date().getDate(); //定义日的变量的初始值
this.Days = new Array(39); //定义写日期的数组
this.DateCell = new Array(39); //存放日期单元格

this.followcodes= ""; //存放执行完点击日历以后需要执行的操作代码

this.tmpTdClass = "";
this.redraw = function (){ //定义redraw方法,用于重绘整个日历

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片