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

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

文章来源:365jz.com     点击数:410    更新时间: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() {
            
//上一页 2009年1月 下一页
            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, 7this.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>
  
<date id="200991" >
    
<active>
      
<name>新浪</name>
      
<href>http://www.sina.com</href>
    
</active>
  
</date>
  
<date id="2009910">
    
<active>
      
<name>我的博客园</name>
      
<href>http://wzjCode.cnblogs.com</href>
    
</active>
    
<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>

该控件的显示效果如下:

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (410人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------