本文主要是介绍跨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><</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>></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);'><<</div> " +
" <div name=prevMonth class=divButton title='向前翻 1 月' οnclick='parent.prevM()' οnfοcus='this.blur()' style='width: 17px;'><</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;'>></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);'>>></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
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><</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>></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);'><<</div> " +
" <div name=prevMonth class=divButton title='向前翻 1 月' οnclick='parent.prevM()' οnfοcus='this.blur()' style='width: 17px;'><</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;'>></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);'>>></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
这篇关于跨Frame的日历控件,在meizz3.0版基础上用Popup改写的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
