2007-11-03
类似Google Calendar效果的简单实现[收藏]
From：http://blog.csdn.net/wanyongping/archive/2007/11/02/1862884.aspx
目前只是简单的实现了行选择的效果。
后面的功能也是利用DIV来实现的并结合Ajax方法将登陆的数据保存到数据库中。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Calender Event Page</title><meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<script language="javascript">...
var divCount = 0;var drawFlag = false;var initPointY = 20;
function drawTdPanel()...{ var pointX, pointY; var iHeight; pointY = event.y; if (pointY < 20) return ; if ((pointY / 20) > 0)...{ iHeight = pointY -initPointY; iHeight = (Math.floor(iHeight / 20)*20); divCount = divCount + 1; var objDiv = document.createElement("Div"); objDiv.id = "EventPanel" + divCount; objDiv.style.position = "absolute"; objDiv.style.top = initPointY + "px"; objDiv.style.background = "#9999CC"; objDiv.style.zindex = "3"; objDiv.style.width = "85%"; objDiv.style.height = iHeight + "px"; var objDivPanel = document.getElementById("divPanel"); objDivPanel.appendChild(objDiv);
}}function DrawDivOnMouseDown()...{ if (event.y < 20) return ; drawFlag = true; initPointY = event.y ; initPointY = (Math.floor((initPointY) / 20) - 1) * 20; drawTdPanel();}function DrawDivOnMouseMove()...{ window.status = "X:" + event.x + ",Y:" + event.y; if (drawFlag == true)...{ var objDivPanel = document.getElementById("divPanel"); objDivPanel.innerHTML = ""; drawTdPanel(); }}function DrawDivOnMouseUp()...{ drawFlag = false;}function drawEventPanel()...{
}</script></head><body><div id="divPanel" onMouseDown="DrawDivOnMouseDown();" onMouseMove="DrawDivOnMouseMove();" onMouseUp="DrawDivOnMouseUp();" style="position:absolute; filter:alpha(opacity=80); border:1px solid #FF0000; background-color:#FFFFCC; z-index:2; width:85%; height:300px; left:111px; top: 16px;" > </div><div style="top:20px;border:1px solid #FF0033; "><table id="CalenderEventTable" width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="10%" rowspan="2" align="center" valign="top">00:00</td> <td width="90%"> </td> </tr> <tr> <td> </td> </tr> <tr> <td rowspan="2" align="center" valign="top">01:00</td> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td rowspan="2" align="center" valign="top">02:00</td> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td rowspan="2" align="center" valign="top">03:00</td> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td rowspan="2" align="center" valign="top">04:00</td> <td> </td> </tr> <tr> <td> </td> </tr></table></div></body></html>
评论排行榜