2007/11/02
目前只是简单的实现了行选择的效果。
后面的功能也是利用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 >
"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 >