跨Frame的日历控件,在meizz3.0版基础上用Popup改写

因为公司的单点登录框架的原因,需要在一个空间非常狭小的地方,放一个日历控件,网上搜了下,支持跨frame的日历控件非常少,而且很丑于是只好自己动手了,以前一直在用梅花雪的日历感觉十分好用,于是准备在梅花雪3.0日历控件基础上进行修改,经过两个晚上的奋战终于搞定了,不过丢失了快捷键,并且当select列表长度超过日历高后失效.汗一个,实在搞不定了就那样吧,把年份调的少些,刚好可以显示在日历高度范围内就好了.快捷键也搞不定了,希望有牛人能够帮助改进.

 

<!--
document.write( " <div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: 144; height: 193; display: none'> " );
document.write( " <iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div> " );
var  syjPopup  =  window.createPopup();
syjPopup.document.createStyleSheet( ' syj.css ' );
function  writeIframe()
{
     var  strIframe  =   " <form name=meizz> " ;
     if  (WebCalendar.drag){ strIframe  +=   " <scr " + " ipt language=javascript> " +
     " var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){ " +
     " if(parent.WebCalendar.drag && drag){if(this.syjPopup.document.body.style.left=='')this.syjPopup.document.body.style.left=0; if(this.syjPopup.document.body.style.top=='')this.syjPopup.document.body.style.top=0; " +
     " this.syjPopup.document.body.style.left = parseInt(this.syjPopup.document.body.style.left) + window.event.clientX-cx; " +
     " this.syjPopup.document.body.style.top  = parseInt(this.syjPopup.document.body.style.top)  + window.event.clientY-cy;}} " +
     " function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr " + " ipt> " }

    strIframe  += " <table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0> " +
     " <tr><td width=140 height=19 bgcolor=' " +  WebCalendar.lightColor  + " '> " +
     "     <table width=140 id=tableHead border=0 cellspacing=1 cellpadding=0><tr align=center> " +
     "     <td width=15 height=19 class=bg title='向前翻 1 月' style='cursor: hand' οnclick='parent.prevM()'><b>&lt;</b></td> " +
     "     <td width=60 id=meizzYearHead οnclick='parent.funYearSelect(parseInt(this.innerText, 10))' " +
     "     οnmοuseοver='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor' " +
     "     οnmοuseοut='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor' style='cursor: hand'></td> " +
     "     <td width=40 id=meizzYearMonth οnclick='parent.funMonthSelect(parseInt(this.innerText, 10))' " +
     "     οnmοuseοver='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor' " +
     "     οnmοuseοut='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor' style='cursor: hand'></td> " +
     "     <td width=15 class=bg title='向后翻 1 月' οnclick='parent.nextM()' style='cursor: hand'><b>&gt;</b></td></tr></table> " +
     " </td></tr><tr><td height=20><table id=tableWeek border=1 width=140 cellpadding=0 cellspacing=0  " ;
     if (WebCalendar.drag){strIframe  +=   " οnmοusedοwn='dragStart()' οnmοuseup='drag=false' οnmοuseοut='drag=false' " ;}
    strIframe  +=   "  borderColorLight=' " +  WebCalendar.darkColor  + " ' borderColorDark=' " +  WebCalendar.lightColor  + " '> " +
     "     <tr align=center><td height=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table> " +
     " </td></tr><tr><td valign=top width=140 bgcolor=' " +  WebCalendar.lightColor  + " '> " +
     "     <table id=tableDay height=120 width=140 border=0 cellspacing=1 cellpadding=0> " ;
          for ( var  x = 0 ; x < 5 ; x ++ ){ strIframe  +=   " <tr> " ;
          for ( var  y = 0 ; y < 7 ; y ++ )  strIframe  +=   " <td class=out id='meizzDay " +  (x * 7 + y)  + " '></td> " ; strIframe  +=   " </tr> " ;}
         strIframe  +=   " <tr> " ;
          for ( var  x = 35 ; x < 39 ; x ++ ) strIframe  +=   " <td class=out id='meizzDay " +  x  + " '></td> " ;
         strIframe  += " <td colspan=3 class=out ><div class=divButton style='width: 100%;height: 100%;border: 0;padding-top: 4px;font-weight: normal;' οnfοcus='this.blur()' οnclick='parent.hiddenCalendar()'>关闭</div></td></tr></table> " +
     " </td></tr><tr><td height=20 width=140 bgcolor=' " +  WebCalendar.lightColor  + " '> " +
         " <div name=prevYear class=divButton title='向前翻 1 年' οnclick='parent.prevY()' οnfοcus='this.blur()' style='width: 20px;border-right: none;meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000);'>&lt;&lt;</div> " +
         " <div name=prevMonth class=divButton title='向前翻 1 月'  οnclick='parent.prevM()' οnfοcus='this.blur()' style='width: 17px;'>&lt;</div> " +
         " <div name=today class=divButton title='当前日期' οnclick="parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())" οnfοcus='this.blur()' style='width: 50;margin-left: 8px;margin-right: 8px;'>今天</div> " +
         " <div name=nextMonth class=divButton title='向后翻 1 月' οnclick='parent.nextM()' οnfοcus='this.blur()' style='width: 17px;'>&gt;</div> " +
         " <div name=nextYear class=divButton title='向后翻 1 年' οnclick='parent.nextY()' οnfοcus='this.blur()' style='width: 20px;border-left: none;meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999);'>&gt;&gt;</div> " +
     " </td></tr><table></form> " ;

     with (WebCalendar.iframe)
    {
        document.writeln(strIframe); document.close();
         for ( var  i = 0 ; i < 39 ; i ++ )
        {
            WebCalendar.dayObj[i]  =  eval( " meizzDay " +  i);
            WebCalendar.dayObj[i].onmouseover  =  dayMouseOver;
            WebCalendar.dayObj[i].onmouseout   =  dayMouseOut;
            WebCalendar.dayObj[i].onclick      =  returnDate;
        }
    }
     var  sbody  =   this .syjPopup.document.body;
    sbody.style.overflow   =   " hidden " ;
     this .syjPopup.document.body.innerHTML  =  strIframe;
     with (syjPopup.document.body.all)
    {
         for ( var  i = 0 ; i < 39 ; i ++ )
        {
            WebCalendar.dayObj[i]  =  eval( " meizzDay " +  i);
            WebCalendar.dayObj[i].onmouseover  =  dayMouseOver;
            WebCalendar.dayObj[i].onmouseout   =  dayMouseOut;
            WebCalendar.dayObj[i].onclick      =  returnDate;
        }
    }
}
function  WebCalendar()  // 初始化日历的设置
{
     this .daysMonth   =   new  Array( 31 ,  28 ,  31 ,  30 ,  31 ,  30 ,  31 ,  31 ,  30 ,  31 ,  30 ,  31 );
     this .day