iCal风格的漂亮日历

 

这个日历使用jQuery + CSS 生成，苹果风格，很漂亮！鼠标放到相应的日期上，当天的事件会浮现出来。至于实现代码，相当的简单。首先是使用HTML + CSS来实现日历的主体部分

 

HTML：

<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 </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 </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>

 

CSS：

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; }

 

 

然后，为实现鼠标悬停时浮现当天事件的效果，我们需要把下面的代码加到您需要的日期之后（如，13号有两个事件，实现方法如下）：

<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>

 

然后是它的核心部分，我们的主角jQuery代码：

$(function () { $('.date_has_event').each(function () { // options var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; // tracker var 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 element if (hideDelayTimer) clearTimeout(hideDelayTimer); // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true; // reset position of popup box popup.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 variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer); // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ bottom: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); }); });

 

下面的CSS用于包含日期事件的div：

.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; }

 

还有……没有了！就这么简单！

 

演示地址：http://bit.ly/aJUyWS

源码下载：http://download.csdn.net/source/2064726