类似Google Calendar效果的简单实现[收藏]

liudaoru

浏览: 1573896 次
性别:
来自: 北京

最近访客更多访客>>

fantaxy025025

金武飞扬

2720851545

talkweb_xiang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Google Ajax JavaScript HTML .net

目前只是简单的实现了行选择的效果。

后面的功能也是利用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>

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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

分享到：

Tracert、Route 与 NBTStat的使用技巧 | 建立并且运行一个脚本[z]

2007-11-03 22:49
浏览 2441
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论