仿goole日历，点击弹出圆形框

最新推荐文章于 2020-06-15 14:11:13 发布

刘正权

最新推荐文章于 2020-06-15 14:11:13 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/liu765023051/article/details/8364060

版权

首先声明，本例子并不是我独立完成的，是我根据各位网友提供的资料整理的。本例中使用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