返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jQuery写的日历(包括日历的样式及功能)

2020-05-17 06:18:03易采站长站整理


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title></title>
<script src=”../JS/connotation.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var c = new Calendar(“c”);
document.write(c);
</script>
</head>
<body>
<div>
普通调用:<input type=”text” name=”txt2″ onclick=”c.showMoreDay = true; c.show(this);” /><br />
<div style=”height: 262px”>
</div>
按钮调用:<input type=”text” name=”btntxt” id=”btntxt” /><input name=”button” value=”*”
id=”button” type=”button” onclick=”c.showMoreDay = true; c.show(getObjById(‘btntxt’), ‘1982-1-1’, this)” />
<br />
<input type=”text” name=”btntxt3″ id=”btntxt3″ /><input name=”button3″ value=”*”
id=”button3″ type=”button” onclick=”c.showMoreDay = true; c.show(this, getObjById(‘btntxt3’))” />
</div>
</body>
</html>

需要的jQuery文件

function Calendar(objName)
{
this.style = {
borderColor : “#909eff”, //边框颜色
headerBackColor : “#909EFF”, //表头背景颜色
headerFontColor : “#ffffff”, //表头字体颜色
bodyBarBackColor : “#f4f4f4”, //日历标题背景色
bodyBarFontColor : “#000000”, //日历标题字体色
bodyBackColor : “#ffffff”, //日历背景色
bodyFontColor : “#000000”, //日历字体色
bodyHolidayFontColor : “#ff0000”, //假日字体色
watermarkColor : “#d4d4d4”, //背景水印色
moreDayColor : “#cccccc”
};
this.showMoreDay = false; //是否显示上月和下月的日期
this.Obj = objName;
this.date = null;
this.mouseOffset = null;
this.dateInput = null;
this.timer = null;
};
Calendar.prototype.toString = function()
{
var str = this.getStyle();
str += ‘<div Author=”alin” class=”calendar” style=”display:none;” onselectstart=”return false” oncontextmenu=”return false” id=”Calendar”>n’;
str += ‘<div Author=”alin” class=”cdrWatermark” id=”cdrWatermark”></div><div id=”cdrBody” style=”position:absolute;left:0px;top:0px;z-index:2;width:140px;”>’;

相关文章 大家在看