仿goole日历，点击弹出圆形框
首先声明，本例子并不是我独立完成的，是我根据各位网友提供的资料整理的。本例中使用DIV+CSS+JQuery+JavaScript实现。由于本例是仿造goole制作的，自然，中间涉及到了一些关于时间相关的计算。平时的学习工作中，这一块学习的很模糊的同学，可以借此恶补一下。
图片效果：
index.html页面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="activityHelper.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="activityHelper.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var activityHelper = new ActivityHelper({
renderTo : 'activity',
loadDate : '2011-06-06'
});
});
</script>
</head>
<body onselectstart="return false" style="-moz-user-select: none;">
<div id="activity">
</div>
<form action="" method="get">
<input name="Click me" type="button" />
</form>
</body>
</html>
activityHelper.js页面：
var ActivityHelper = function(config){
this.renderTo = config.renderTo;//该控件将要添加到的元素的ID址
this.loadDate =this.nowDate();//系统会自动载入本天数据
this.init();
}
ActivityHelper.prototype = {
init : function(){
var entity = this;
//初始化月视图
entity.initMonthView();
},
//初始化月视图
initMonthView : function(){
var entity = this;
entity.clear();
//开始绘月视图
var id = entity.random();
var monthTable = '<table id="'+id+'" class="monthTable"></table>';
$(monthTable).appendTo($("#"+entity.renderTo));
var table_weeks = [];
table_weeks.push('<tr class="table_weeks" id="table_weeks">');
for(var i=0;i<7;i++){
table_weeks.push('<td class="week-day"></td>');
}
table_weeks.push('</tr>');
$(table_weeks.join('')).appendTo($("#"+id));
var weeks = ['周日','周一','周二','周三','周四','周五','周六'];
//将周数据添加到顶部视图中
var i=0;
$("td.week-day").each(function(){
$(this).text(weeks[i]);
i++;
});
//计算该月的各天
var dateInfo = entity.dateOfMonth(entity.loadDate);
entity.days = dateInfo.days;
var monthTd = [];
var colnums = 0;
//首先绘制该月第一周的空白时间
for(var i=0;i<dateInfo.firstDayOfWeek;i++){
if(colnums==0){
monthTd.push('<tr class="dayTr">');
}
monthTd.push('<td class="noday"></td>');
colnums++;
}
//绘制该月的各个时间点
for(var i=1;i<=dateInfo.days;i++){
if(colnums==0){
monthTd.push('<tr class="dayTr">');
}
monthTd.push('<td class="dayTd" id="'+i+'"><div class="dayTime">'+i+'</div></td>');
colnums++;
if(colnums==7){
monthTd.push("</tr>");
colnums = 0;
}
}
//绘制该月最后一周的空白时间
for(var i=0;i<6-dateInfo.lastDayOfWeek;i++){
monthTd.push('<td class="noday"></td>');
}
monthTd.push("</tr>");
$(monthTd.join("")).appendTo($("#"+id));
//为每一天添加一个table
var dayTimeHeight = $('td.dayTd').find(".dayTime").height();
var tdHeight = $('td.dayTd').height();
var tableHeight = tdHeight-dayTimeHeight;
var counts = tableHeight/16;
var table = [];
table.push('<table class="itemTable">');
for(var i=1;i<=counts;i++){
table.push('<tr class="itemTr"><td class="itemTd"></td></tr>');
}
table.push('</table>');
//将table添加到每一天里面
$("td.dayTd").each(function(){
$(table.join('')).appendTo($(this));
});
//为每一天添加点击事件
$("td.dayTd").click(function(){
entity.clear();
$("td.dayTd").removeClass("tempSelect");
var id = $(this).attr("id");
var popItemId = entity.popItem();
var tdInfo = entity.getTdInfo($(this));
$(this).addClass("tempSelect");
var position = {};
position.left = tdInfo.left;
position.top = tdInfo.top+15;
entity.setPopItemPosition(position, popItemId);
//为弹出框添加内容
var timeTile = dateInfo.month+"月 "+id+"日";
entity.activityAddItemOfMonth(popItemId,timeTile,id);
});
},
//对月日期进行相关的计算
dateOfMonth : function(date){
var entity = this;
date = date.replace(/-0/g,"-");
var dateArray = date.split("-");
var year = dateArray[0];
var month = dateArray[1].replace("0","");//去掉日期中的0，比如将"05"->5
var day = dateArray[2];
//计算该月有几天
var date = new Date(year,month,0);
var days = date.getDate();//计算该月有几天
date.setDate(1);
var firstDayOfWeek = date.getDay();//计算该月的一号是周几
date.setDate(days);
var lastDayOfWeek = date.getDay();
var thisMonth = {};
thisMonth.year = year;
thisMonth.month = month;
thisMonth.day = day;
thisMonth.days = days;
thisMonth.firstDayOfWeek= firstDayOfWeek;
thisMonth.lastDayOfWeek = lastDayOfWeek;
return thisMonth;
},
//创建一个弹出窗口
popItem : function(){
var entity = this;
var id = this.random();
var div = '<div id="'+id+'" class="popItem temp"><div class="close"></div>'
+ '<table><tr><td class="TL"></td><td class="TC"></td><td class="TR"></td></tr>'
+ '<tr><td class="ML"></td><td class="MC"></td><td class="MR"></td></tr>'
+ '<tr><td class="BL"></td><td class="BC"></td><td class="BR"></td></tr>'
+ '</table>'
+ '</div>';
$(div).appendTo($("#"+entity.renderTo));
$('<div id="vPic" class="vPic temp"></div>').appendTo($("#"+entity.renderTo));
//添加一个关闭事件
$("#"+id+" .close").click(function(){
entity.clear();
});
return id;
},
//设置弹出窗口的位置
setPopItemPosition : function(position,popItemId){
var left = position.left-50;
var top = position.top-230;
if(top<=0){
top=0;
$("#vPic").css("display","none");
}
if((left+410)>$("body").width()){
left=$("body").width()-410;
$("#vPic").css("display","none");
}
if(left<=0){
left=0;
$("#vPic").css("display","none");
}
$("#"+popItemId).css({left:left+'px',top:top+'px'});
$("#vPic").css({left:(left+100)+'px',top:(top+135)+'px'});
},
//根据传入的TD对象，获得该元素的绝对位置以及宽和高等属性
getTdInfo : function(item){
var tdInfo = {};
tdInfo.width = item.width();
tdInfo.height = item.height();
tdInfo.left = item.offset().left;
tdInfo.top = item.offset().top;
if(item.parent().is(".solid")){
tdInfo.index = item.index()-1;
}else {
tdInfo.index = item.index();
}
return tdInfo;
},
//在月视图中，创建一个活动添加窗口
activityAddItemOfMonth : function(popItemId,time){
var entity = this;
var item = [];
item.push('<div>');
item.push('<table class="contentTable"><tr><td class="label">时间：</td><td class="time">'+time+'</td></tr><tr><td class="label">内容：</td><td><input type="text" class="text" /></td></tr></table>');
item.push('<div class="operate"><div id="createButton" class="createButton">创建活动</div><a href="#" class="moreInfo">编辑活动详细信息</a></div>');
item.push('</div>');
$(item.join('')).appendTo($("#"+popItemId+" .MC"));
//为编辑详细信息添加点击事件
$("#"+popItemId+" .moreInfo").click(function(){
window.parent.mainFrame.location = entity.moreInfoPath+'?loadDate='+entity.loadDate;
});
},
//清除系统中的临时DIV
clear:function(){
$(".temp").remove();
},
//获得当前的时间
nowDate : function(){
var date = new Date();
var year = date.getYear();
var month = parseInt(date.getMonth())+1;
var day = date.getDate();
return year+"-"+month+"-"+day;
},
//用于系统中随机ID的生成
random : function(){
//首先产生一个1000以内的随机数
var r = Math.round(Math.random()*1000);
//获得当前的日期
var date = new Date();
var year = date.getYear();
var month = date.getMonth();
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
//根据日期+随机数生成一个随机ID
return 'id_'+year+month+day+minutes+seconds+r;
}
}
activityHelper.css页面：
html,body,img,div,h1,h2,p,th,td,table
{
margin:0px;
padding:0px;
border:0px;
}
/****************日期格式table*********************/
table{
border-collapse:collapse;
border-spacing:0;
}
/***********************设置添加弹出框css样式*******************************/
.popItem {
position:absolute;
width:420px;
height:160px;
z-index:200;
}
.popItem .close{
position:absolute;
width:13px;
height:14px;
background:url("image/activity/google-close.png");
top:10px;
right:11px;
cursor:pointer;
}
.popItem table {
width:100%;
}
.popItem .TL {
width:25px;
height:25px;
background:url(image/activity/add_LT.gif);
}
.popItem .TR {
width:25px;
height:25px;
background:url(image/activity/add_RT.gif);
}
.popItem .TC {
border-top:1px solid #ababab;
background:white;
}
.popItem .ML {
background:white;
border-left:#ababab 1px solid;
}
.popItem .MR {
background:white;
border-right:#ababab 1px solid;
}
.popItem .MC {
height:108px;
background:white;
}
.popItem .BL {
width:25px;
height:25px;
background:url(image/activity/add_LB.gif);
}
.popItem .BC {
border-bottom:1px solid #ababab;
background:white;
}
.popItem .BR {
width:25px;
height:25px;
background:url(image/activity/add_RB.gif);
}
.vPic {
position:absolute;
width:96px;
height:96px;
background:url("image/activity/bubble_combined.png");
background-position:-54px 0px;
z-index:201;
}
.popItem .label {
text-align:left;
width:80px;
padding-top:5px;
padding-bottom:5px;
font: 13px Arial,Sans-serif;
}
.popItem .operate{
margin-top:25px;
}
.popItem .createButton{
float:left;
width:70px;
height:23px;
font-size:13px;
line-height:25px;
text-align:center;
cursor:pointer;
background:url("image/activity/createButton.gif") no-repeat;
}
.popItem .moreInfo{
margin-left:8px;
height:15px;
text-decoration:underline;
color:#2200CC;
cursor:pointer;
font-size:13px;
line-height:28px;
}
.popItem .line {
border-top:#DDDDDD 1px solid;
margin-top:15px;
}
/************************月视图开始****************************/
.monthTable {
width:100%;
height:100%;
}
.dayTr {
height:120px;
}
.dayTr .dayTd{
border: 1px solid #DDDDDD;
vertical-align: top;
text-align:right;
}
.dayTr .noday{
border: 1px solid #DDDDDD;
vertical-align: top;
text-align:right;
}
.dayTr .dayTime {
background:#F8F9FF;
font: 13px Arial,Sans-serif;
color:#666666;
padding-right:5px;
}
.tempSelect {
background:#F0F3FF;
}
.itemTable {
width:100%;
}
.itemTable td {
height:15px;
}
/*************月视图Items（完整的）*************/
.dayItem_all tr {
border:0px;
}
下载地址：http://download.csdn.net/detail/liu765023051/4913981