仿goole日历，点击弹出圆形框
来源：互联网 发布：广东省地名地址数据库 编辑：程序博客网 时间：2024/06/05 07:26
首先声明，本例子并不是我独立完成的，是我根据各位网友提供的资料整理的。本例中使用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));//为每一天添加一个tablevar 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"->5var 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;});},//清除系统中的临时DIVclear: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();//根据日期+随机数生成一个随机IDreturn '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
- 仿goole日历，点击弹出圆形框
- 点击弹出日历框
- 点击弹出日历框
- Android 点击输入框弹出日历 《H》
- 【swift】点击textfield弹出日历等
- 关于CXGRID中点击单元格后弹出日历
- 仿QQ空间、微信朋友圈点击评论弹出输入框
- 基于js的一个日历控件，点击按钮，弹出日历，显示日期到文本框
- 自定义PopupWindow,点击弹出PopupWindow,背景变暗,仿点击弹出分享
- 点击弹出提示框
- 点击弹出下拉框
- 点击按钮弹出框
- goole
- goole
- android仿QQ点击加号弹出菜单特效
- android-仿iOS弹出框
- android 仿IOS弹出框
- Android仿IOS弹出框
- 鼠标划取图像区域并计算面积的matlab代码
- http_get
- 选择,插入,交换,冒泡,希尔排序算法的效率比较
- cacti
- 七周七语言：Prolog Day 1
- 仿goole日历，点击弹出圆形框
- Htop--先进的交互性和实时性的Linux进程监控工具
- 在Xcode4中配置离线帮助文档
- 研磨设计模式之简单工厂模式-1
- 玩转CSS3色彩
- Unity中快速给Object在屏幕上定位
- 使用C#打造通用的数据库连接类
- Win8 Metro UI风格的Web设计资源分享
- Http_Post
