jQuery google日历练习-20130824
一、效果及功能说明
模仿google日历自己来完成一个日历的所有效果
二、我的想法
通过jquery来直接写入页面表格不需要在body里面写用循环直接在循环出来
现在已经循环出来24个小时和所有内容表格
但是内容表格还无法全部的分清楚，原本是上下两个不同的时间点但是现在会上半部分的全部显示完以后下半部分才显示出来
还有的就是浮动框还没做出来，和点击的事件获得每个半小时的时间和日期，还有上面的具体时间还没做
因为有问题所有昨天好好的查了jquery的创建方法在上网一般有三个方法只有前面一个方法有用后再来早上的时候总算才在jquery官方网站上面找到一个可以创建方法的例子解决了循环重复定义的问题但是在这里还是有循环的表格可以出现但是时间还拿不到
今天好好的重新的看了官方的google日历里面看到不是全部都是用jquery写的大部分都是js这个让有了很大的启发还有在以前我总是想着日期的问题是从当天开始循环的但是在认真的研究以后发现其实不是的google日历是以一周为一个时间单位周一到周七的星期是不会变的只有天数和月份在一直改变着这个给了我很大的启发天数应该从周期着手这样就避免了日期每天都会更新的问题
今天主要上在通过jquery来让浮层获得当前表格的id已经可以获得当前的id但是在jquery里还没找到可以将通过循环而得出的id传输出去的方法可以获得id也可以在直接在当前的表格里面直接通过jquery来实现往表格内部插入内容，但是要通过按钮来实现将input里面的内容传输到表格里面方法还没做到，现在可以在点击当前表格的时候直接插入内容，个获得当前表格的id，但是当出现一个中间的时候就是按钮创建任务的按钮还不能获得精准的表格内容下面有一个方法可以获得表格的id但是只限于是第一个表格的id
考虑很久后又想起来了前几天刚刚学会的在jquery里面自定义方法后可以然后首先将获得id的方法通过方法定义起来，在定义出一个点击表格事件来调用获得id的方法，在点击表格的方法自定义后，让按钮可以调动使用，这样就可以实现在点击了表格以后将表格的id存放到自定义的方法里在传入按钮里面，让input可以获得到表格的id从而将input的balue传入表格里面，但是将调用id的方法传入表格点击事件里有问题，取不到id，这个方法感觉可以行但还是存在问题
<今天的想法>换一个方式，就是取得当前表格的top在赋予浮层的高度，通过这个办法来获得数去当前表格的属性，只要能获得当前表格的属性就可以获得其他的属性offsetTop这个方法可以获得当前表格的高度，在js里面是可以的但是写入jquery里就不行，也看过质料写法都一样但就还是去不到
三、效果图
四、代码
<!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()
{
//这里是想获得表格的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");
//addid.html() = $("#input-two").val();
//可以获得第一个表格的id
//alert($("#table-right td").attr("id"));
//想用这个方法来看看能不能通过定义按钮来获得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
//定义表单的任意表格让浮层出现
$("#table-right td").click(function()
{
$("#input-field").css("display","block");
//获得当前表格的高度方法
$("#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> 相关推荐
84483065 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
tztzyzyz 2020-07-05
delmarks 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
momode 2020-09-11
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28