jQuery google日历练习-20130831

最新推荐文章于 2013-09-02 00:57:59 发布

xjwolaile

最新推荐文章于 2013-09-02 00:57:59 发布

阅读量87

点赞数

分类专栏：学习前端技术 jQuery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xjwolaile/article/details/84474930

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

一、效果及功能说明

模仿google日历自己来完成一个日历的所有效果

二、我的想法

今天晚上只能做到的限度是将表格本身的当前id在表格的多个点击事件里跳出来，在装入参数里面传到入后面的方面里面，但是传入的方法有点问题。


$(document).ready(function()
{
	$("#input-two").click(function(hh){
		alert(hh);
	});
	$("#table-right td").bind({
		click:function(hh){
		$("#input-field").css("display","block");
		var hh = $(this).attr("id");
		},
}):

三、代码


<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<style type="text/css">
* { 
	margin:0;
	padding:0px;
} 

body{
	font-family:Microsoft YaHei;
}

.ensemble{
	float:left;
	margin-top: 100px;
	margin-left: 100px;
}

.table-left{
	float:left;
	width:146px;
}

.table-left table tr th{
	float:left;
	width:140px;
	height:40px;
	border:1px solid #C4E1FF;
	overflow:hidden;
	padding-top: 10px;
	font-weight:normal;
}

.table-right{
	float:left;
	margin-left: -5px;
}

.top{
	float:left;
	margin-top: 0px;
	width:140px;
	height:26px;
	border:1px solid #C4E1FF;
	border-bottom: 1px dashed #C4E1FF;
}

.below{
	float:left;
	margin-top: -2px;
	width:140px;
	height:25px;
	border-left: 1px solid #C4E1FF;
	border-right: 1px solid #C4E1FF;
	border-bottom:1px solid #C4E1FF;
}

.input-field{
	position:relative;
	top: 0px;
	left: 0px;
	width:400px;
	height:150px;
	border:1px solid #C4E1FF;
	display:none;
}

.input-one{
	float:right;
	width:200px;
	height:20px;
	margin-top: 70px;
	margin-right: 100px;
}

.input-two{
	float:left;
	margin-top: 120px;
	margin-left: 10px;
}

</style>
<script language="javascript" type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
	//这是在写标题的年月日
	var time = new Date();
	var year = time.getFullYear();
	var moon = time.getMonth() + 1;
	var sky = time.getDate() - 2;
	var addsky = time.getDate() + 7 - 2;
	$("#title").append(year + '年');
	$("#title").append(moon + '月');
	$("#title").append(sky + '日');
	$("#title").append('-' + addsky + '日');
});

	//定义按钮按下后让浮层隐藏起来和通过jquery来取得表格的id
	//$("#input-two").click(function(hour,i)
	//{
		//这里是想获得表格的id并将value直接传输进去的方法但是没成功
		//$("#0tr"+hour+"td"+i).html() == $("#input-one").val();
		//$("#0tr"+hour+"td"+i).append($("#input-one").val());
		//alert($("#input-one").val());
	//	$("#input-field").css("display","none");
		//alert($('#0tr+'hour'+td+'i'+'));
		//addid.html() = $("#input-two").val();
		//可以获得第一个表格的id
		//alert($("#table-right td").attr("id"));
		//alert('$('+#sss+')');
		//想用这个方法来看看能不能通过定义按钮来获得id就像前面的获得id的方法虽然只获得了一个id还是固定但是获得到了，结果还是没成功
		//$("#table-right td").click( jQuery.proxy( addid, "ss" ));
//	});

	//将获得id的方法放进一个方法里然后当需要id的时候就可以直接调去这个方法获得id
//	var addid = {
 	//	 ss: function() {
    //		alert($(this).attr("id"));
 	//	 }
//	};



	//$("#table-right td").click(jQuery.proxy(addid,"ss"));

	//把调用id的方法调用过来然后在定义一个方法取得表格的然后指定跳出id但是没成功
	//var oneid = {
		//bb: function(){
		//	$("#table-right td").click(jQery.proxy(addid,"ss"));
	//	}

	//$("#table-right td").click( jQuery.proxy( addid, "ss" ));

	//$("#table-right td").click

	//定义表单的任意表格让浮层出现
$(document).ready(function()
{
	$("#input-two").click(function(hh){
		alert(hh);
	});
	$("#table-right td").bind({
		click:function(hh){
		$("#input-field").css("display","block");
		var hh = $(this).attr("id");
		},


		//click:function(){alert($(this).attr("id"));}
		//click:function($())


		//获得当前表格的高度方法
		//$("#input-field").offsetTop("table-right td").css("top");

		//这个方法就是可以直接获得当前表格里面的任何信息
	//	var vv = $(this);
		//获得当前表格的高度
	//	vv.css("top","left") == $("#input-field").css("top","left");
		//获得当前表格的id
		//var addid = $(this).attr("id");
		//是当获得在点击事件触发的时候直接将ss写入表格的内部
	//	$(this).html("ss");
		//$(this).css("background-color","#000000");
		//alert(11);
	});
});
function titles(titleNum)
{
	//这里是通过js来循环24小时的表格
	var titleText = new Array("上午12点","上午1点","上午2点","上午3点","上午4点","上午5点","上午6点","上午7点","上午8点","上午9点","上午10点","上午11点","下午12点","下午1点","下午2点","下午3点","下午4点","下午5点","下午6点","下午7点","下午8点","下午9点","下午10点","下午11点");
	document.write('<th>'+titleText[titleNum]+'</th>');
}
function toptable(hour)
{
	//是循环上放的带虚线的表格 并且给与ID
	for(i=1; i<8; i++)
	{
		document.write('<td id="0tr'+hour+'td'+i+'" class="top"></td>');
	}
}
function belowtable(hour)
{
	//是循环下面不带虚线的表格 并且给与ID
	for(i=1; i<8; i++)
	{
		document.write('<td id="1tr'+hour+'td'+i+'" class="below" ></td>');
	}
} 
</script>
</head>

<body>
<div class="ensemble">
	<div id="title" class="title">

	</div>
	<div id="input-field" class="input-field">
		<input id="input-two" class="input-two" type="button" value="创建任务"/>
		<input id="input-one" class="input-one" type="text" />
	</div>
	<div class="overall-table">
		<div class="table-left">
			<table cellspacing="0">
			<script language="javascript" type="text/javascript">
				for (j=0;j<24;j++)
				{
					document.write("<tr>");
					titles(j);
					document.write("</tr>");
				}
			</script>
			</table>
		</div>
		<div id="table-right" class="table-right">
			<table cellspacing="0">
			<script language="javascript" type="text/javascript">
			for (z=0;z<24;z++)
			{
				document.write("<tr>");
				toptable(z);
				document.write("</tr><tr>");
				belowtable(z);
				document.write("</tr>");
			}
			</script>
			</table>
		</div>
	</div>
</div>
</body>
</html>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery google日历练习-20130831

一、效果及功能说明模仿google日历自己来完成一个日历的所有效果二、我的想法今天晚上只能做到的限度是将表格本身的当前id在表格的多个点击事件里跳出来，在装入参数里面传到入后面的方面里面，但是传入的方法有点问题。[code="html5"]$(document).ready(function(){ $("#input-two").click(fun...
复制链接

扫一扫

专栏目录