以下是 jquery日历待办事项js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery日历待办事项</title>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery-1.3.min.js" type="text/javascript"> </script>
<script src="js/coda.js" type="text/javascript"> </script>
</head>
<body>
<h1>jquery日历待办事项</h1>
<table cellspacing="0">
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td class="padding" colspan="3"></td>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td class="today"> 9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td class="date_has_event">
13
<div class="events">
<ul>
<li>
<span class="title">Event 1</span>
<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class="title">Event 2</span>
<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</li>
</ul>
</div>
</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td class="date_has_event">
22
<div class="events">
<ul>
<li>
<span class="title">Event 1</span>
<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class="title">Event 2</span>
<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</li>
</ul>
</div>
</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="padding"></td>
</tr>
</tbody>
<tfoot>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tfoot>
</table>
</body>
</html>
JS代码(coda.js):
$(function (){
$('.date_has_event').each(function (){
// optionsvar distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
// trackervar beingShown = false;
var shown = false;
var trigger = $(this);
var popup = $('.events ul',this).css('opacity',0);
// set the mouseover and mouseout on both element$([trigger.get(0),popup.get(0)]).mouseover(function (){
// stops the hide event if we move from the trigger to the popup elementif (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown,or already visibleif (beingShown || shown){
return;
}
else{
beingShown = true;
// reset position of popup boxpopup.css({
bottom:20,left:-76,display:'block' // brings the popup back in to view}
)// (we're using chaining on the popup) now animate it's opacity and position.animate({
bottom:'+=' + distance + 'px',opacity:1}
,time,'swing',function(){
// once the animation is complete,set the tracker variablesbeingShown = false;
shown = true;
}
);
}
}
).mouseout(function (){
// reset the timer if we get fired again - avoids double animationsif (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if requiredhideDelayTimer = setTimeout(function (){
hideDelayTimer = null;
popup.animate({
bottom:'-=' + distance + 'px',opacity:0}
,time,'swing',function (){
// once the animate is complete,set the tracker variablesshown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)popup.css('display','none');
}
);
}
,hideDelay);
}
);
}
);
}
);
CSS代码(master.css):
*{/* old-style reset here:) */
border:0px;padding:0px;}
body{font-family:Helvetica;background:white;text-align:center;background:url(../img/body.png) repeat-x;}
body h1{padding-top:20px;font-size:26px;color:#335;}
table{border-collapse:separate;border:1px solid #9DABCE;border-width:0px 0px 1px 1px;margin:10px auto;font-size:20px;}
td,th{width:81px;height:81px;text-align:center;vertical-align:middle;background:url(../img/cells.png);color:#444;position:relative;}
th{height:30px;font-weight:bold;font-size:14px;}
td:hover,th:hover{background-position:0px -81px;color:#222;}
td.date_has_event{background-position:162px 0px;color:white;}
td.date_has_event:hover{background-position:162px -81px;}
td.padding{background:url(../img/calpad.jpg);}
td.today{background-position:81px 0px;color:white;}
td.today:hover{background-position:81px -81px;}
.events{position:relative;}
.events ul{text-align:left;position:absolute;display:none;z-index:1000;padding:15px;background:#E7ECF2 url(../img/popup.png) no-repeat;color:white;border:1px solid white;font-size:15px;width:200px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;-border-radius:3px;list-style:none;color:#444444;-webkit-box-shadow:0px 8px 8px #333;}
.events li{padding-bottom:5px;}
.events li span{display:block;font-size:12px;text-align:justify;color:#555;}
.events li span.title{font-weight:bold;color:#222;}
分享到QQ
分享到微博
微信扫一扫
