您现在的位置： 365建站网 > 365文章 > [WEB插件]可自定义样式并从XML中读取数据的日历控件

[WEB插件]可自定义样式并从XML中读取数据的日历控件

文章来源：365jz.com 点击数：487 更新时间：2009-10-05 21:44 参与评论

jquery的脚本代码（实现日历的行为）{文件名:calendar.js}

//可直接通过 $("") 方式调用

(function($) {

$.wzjCalendar = function(element, config) { this.init(element, config); };

$.extend($.wzjCalendar.prototype, {

settings: {

cssYearMonth: "cal_full_date",

cssPrev: "cfd_p",

cssNext: "cfd_n",

cssShow: "cfd_m",

cssWeek: "cal_date_title",

cssDate: "cal_date",

cssCurMon: "cal_date_b",

cssOtherMon: "cal_date_a",

cssToday: "cal_date_c",

cssDayAct: "cal_date_d",

cssActive: "cal_date_act",

cssDivActive: "cal_active",

xmlSource: "xml/",

strPrev: "<a href='javascript:;' style='margin:auto; display:block;'>prev</a>",

strNext: "<a href='javascript:;' style='margin:auto; display:block;'>next</a>",

strFormat: "%year.%month",

mode: "click", //click、hover、

divActive: "<p><a target='_blank' href='%href' >%text</a></p>"

curDate: new Date(),

date: new Date(),

wrapper: null,

dnames: ['日', '一', '二', '三', '四', '五', '六'],

$prev: null,

$show: null,

$next: null,

$date: null,

$active: null,

$optionAct: null,

cache: [],

timer: null,

init: function(element, config) {

$.extend(this.settings, config);

this.extendDate();

this.wrapper = $(element);

this.renderControls();

this.date = new Date(this.curDate);

this.date.setDate(1);

this.updateMonth(0);

this.wire();

renderControls: function() {

var $yearMonth = $("<div />");

$yearMonth.addClass(this.settings.cssYearMonth);

var $list = $("<ul/>");

this.$prev = $("<li/>");

this.$prev.addClass(this.settings.cssPrev).html(this.settings.strPrev);

this.$show = $("<li/>");

this.$show.addClass(this.settings.cssShow);

this.$next = $("<li/>");

this.$next.addClass(this.settings.cssNext).html(this.settings.strNext);

$list.append(this.$prev).append(this.$show).append(this.$next);

$yearMonth.append($list);

//一周

var $title = $("<div />");

$title.addClass(this.settings.cssWeek);

this.renderOptions($title, 7, this.dnames);

//日期

this.$date = $("<div />");

this.$date.addClass(this.settings.cssDate);

this.renderOptions(this.$date, 35);

this.$date.append("<div class='clear'></div>");

//活动层

this.$active = $("<div />");

this.$active.addClass(this.settings.cssDivActive);

//容器

this.wrapper.empty();

this.wrapper.append($yearMonth).append($title).append(this.$date).append(this.$active);

wire: function() {

var self = this;

this.$prev.children(0).click(function() {

self.updateMonth(-1);

});

this.$next.children(0).click(function() {

self.updateMonth(1);

});

updateMonth: function(n) {

this.$optionAct = null;

this.$active.hide();

this.adapter(n);

var xmlFile = this.date.getFullYear() + "_" + parseInt(this.date.getMonth() + 1);

this.preloadCache(xmlFile);

activeClick: function() {

var self = this;

$.each(self.cache, function() {

var $option = $("li[id='" + this.id + "']", self.$date);

if ($option) {

$option.addClass(self.settings.cssDayAct);

$option.unbind();

switch (self.settings.mode) {

case 'click': $option.click(function() { self.divActiveShow($(this)); }); break;

case 'hover': $option.hover(function() { self.divActiveShow($(this)); }, function() { self.divActiveHide(); });

self.$active.hover(function() { if (self.timer) clearTimeout(self.timer); }, function() { self.divActiveHide(); }); break;

}

});

divActiveHide: function() {

var self = this;

if (self.$active.css("display") == "none")

return;

self.timer = setTimeout(function() {

self.$active.hide();

}, 1000);

divActiveShow: function($option) {

if (this.timer)

clearTimeout(this.timer);

this.showActive($option);

renderOptions: function($wrap, count, array) {

var list = $("<ul/>");

for (j = 0; j < count; j++) {

var $li = $("<li/>")

if (array != null)

$li.html(array[j]);

list.append($li);

}

$wrap.append(list);

setMonth: function(date, $cal_date) {

var startDate = new Date(date);

startDate.setDate(startDate.getDate() - startDate.getDay());

for (j = 0; j < 35; j++) {

var addDate = startDate.getDate();

$li = $("li:eq(" + j + ")", $cal_date);

$li.text(addDate).removeClass().attr("id", startDate.getFormatDate());

if (startDate.toDateString() == this.curDate.toDateString())

$li.addClass(this.settings.cssToday);

else if (startDate.getMonth() == date.getMonth())

$li.addClass(this.settings.cssOtherMon);

else

$li.addClass(this.settings.cssCurMon);

startDate.setDate(startDate.getDate() + 1);

}

adapter: function(num) {

this.date.setMonth(this.date.getMonth() + num);

this.$show.text(this.date.getDateString(this.settings.strFormat));

this.setMonth(this.date, this.$date);

preloadCache: function(xmlname) {

var self = this;

$.ajax({

url: this.settings.xmlSource + xmlname + '.xml?' + new Date().getTime(),

type: 'GET',

dataType: 'xml',

timeout: 1000,

error: function(xml) {

$("li", self.$date).unbind();

//alert('Error loading XML document' + xml);

success: function(xml) {

$(xml).find("month").each(function(i) {

var $month = $(this);

self.cache = $month.children("date").map(function() {

var $date = $(this);

var id = $date.attr("id");

var active = $date.children("active").map(

function() {

var $active = $(this);

var name = $active.children("name").text();

var href = $active.children("href").text();

return { name: name, href: href };

});

return { id: id, active: active };

});

self.activeClick();

});

}

});

showActive: function($option) {

var offset = $option.offset();

this.$active.css({ display: 'block', position: 'absolute', left: offset.left, top: offset.top + $option.height() });

if (this.$optionAct) { this.$optionAct.toggleClass(this.settings.cssActive); }

$option.addClass(this.settings.cssActive);

this.loadActive($option);

this.$optionAct = $option;

loadActive: function($option) {

var self = this;

if (this.cache) {

$.each(this.cache, function() {

if (this.id == $option.attr("id")) {

var detailAct = "";

for (k = 0; k < this.active.length; k++) {

detailAct += self.settings.divActive.replace("%href", this.active[k].href).replace("%text", this.active[k].name);

}

self.$active.html(detailAct);

return;

}

});

}

extendDate: function() {

$.extend(Date.prototype, { getDateString: function(str) {

str = str.replace('%year', this.getFullYear());

str = str.replace('%month', this.getMonth() + 1);

return str;

getFormatDate: function() {

return this.getFullYear().toString() + parseInt(this.getMonth() + 1).toString() + this.getDate().toString();

}

});

}

});

$.fn.wzjCalendar = function(config) {

this.each(function() {

new $.wzjCalendar(this, config);

});

return this;

};

}

)(jQuery); Css代码{文件名：calendar.css}

*{ margin: 0; padding: 0; }

.cal{ font-size: 9pt; list-style: none; overflow: hidden; width: 141px; margin:auto;}

.cal_full_date{ height: 25px; font-family:simsun,Verdana,Geneva,Arial,Helvetica,sans-serif}

.cal .cal_full_date li{ }

.cal .cal_full_date .cfd_p,.cal .cal_full_date .cfd_n{ width:36px; padding:2px 0 0 0;}

.cal .cal_full_date .cfd_m{ width:67px; font-weight:bold; color:#54320c;}

.cal .cal_date_title{clear: both; color: #54320c; height: 20px; font-weight:bold; background:url(../images/dotted.gif) no-repeat left bottom; }

.cal .cal_date_title li{ height: 20px; line-height: 20px; width: 7px; }

.cal .cal_date li,.cal .cal_full_date li,.cal .cal_date_title li{ display: inline; float: left; text-align: center; width:14%; }

.cal .cal_date li{ height: 19px; line-height: 19px; width: 19px; cursor:pointer; font-size:9px; color:Black;}

.cal .cal_date{ clear: both; height: auto !important; height: 1px; min-height: 1px; color:Black; font-size:12px;}

.cal .cal_date li{ border-left: 0; font-family: Tahoma; font-size: 9px; margin: 1px 1px 0 0; }

.clear{ background: transparent; clear: both; height: 1px; overflow: hidden; width: 100%; }

.cal .cal_date .cal_date_a{ color: #54320C; }

.cal .cal_date .cal_date_b{ color: Yellow; }

.cal .cal_date .cal_date_c{ font-weight:bold; background-color:Black; color: Pink;}

.cal .cal_date .cal_date_d{color: red; text-decoration: underline; }

.cal .cal_date .cal_date_act{color: green }

.cal .cal_active{ display:none; padding: 5px 5px 0 5px; text-align:left; color: green; background:white; border:1px solid Black; color:Black;}

.cal .cal_active p{height:20px; min-width:100px; width:150px;}XML代码{文件名：2009_9.xml} 附注：注意脚本中xml的路径(xmlSource: "xml/")

<?xml version="1.0" encoding="utf-8" ?>

<month>

</active>

</date>

<name>我的博客园</name>

<href>http://wzjCode.cnblogs.com</href>

</active>

<name>Google</name>

<href>http://www.google.com</href>

</active>

</date>

</month>Html代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="Stylesheet" href="calender.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="cal1" class="cal"></div>
    </form>
    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="calendar.js"></script>
    <script type="text/javascript">
        $(function() {$(".cal").wzjCalendar({ mode: 'hover' });})
    </script>
</body>
</html>

该控件的显示效果如下：