使用jquery制作一款华丽日历

发布于，归属于jquery教程。 只剩下板凳啦！ 共有378人围观    

ical

点此下载

来看其制作过程：

一、建立个包含当月所有日期的表格。

  1. <table cellspacing="0">
  2.     <thead>
  3.         <tr>
  4.             <th>Mon</th><th>Tue</th><th>Wed</th>
  5.             <th>Thu</th><th>Fri</th><th>Sat</th>
  6.             <th>Sun</th>
  7.         </tr>
  8.     </thead>
  9.     <tbody>
  10.         <tr>
  11.             <td class="padding" colspan="3"></td>
  12.             <td> 1</td>
  13.             <td> 2</td>
  14.             <td> 3</td>
  15.             <td> 4</td>
  16.         </tr>
  17.         <tr>
  18.             <td> 5</td>
  19.             <td> 6</td>
  20.             <td> 7</td>
  21.             <td> 8</td>
  22.             <td class="today"> 9</td>
  23.             <td>10</td>
  24.             <td>11</td>
  25.         </tr>
  26.         <tr>
  27.             <td>12</td>
  28.             <td class="date_has_event">
  29.                 13
  30.             </td>
  31.             <td>14</td>
  32.             <td>15</td>
  33.             <td>16</td>
  34.             <td>17</td>
  35.             <td>18</td>
  36.         </tr>
  37.         <tr>
  38.             <td>19</td>
  39.             <td>20</td>
  40.             <td>21</td>
  41.             <td class="date_has_event">
  42.                 22
  43.             </td>
  44.             <td>23</td>
  45.             <td>24</td>
  46.             <td>25</td>
  47.         </tr>   
  48.         <tr>
  49.             <td>26</td>
  50.             <td>27</td>
  51.             <td>28</td>
  52.             <td>29</td>
  53.             <td>30</td>
  54.             <td>31</td>
  55.             <td class="padding"></td>
  56.         </tr>
  57.     </tbody>
  58.     <tfoot>
  59.         <th>Mon</th><th>Tue</th><th>Wed</th>
  60.         <th>Thu</th><th>Fri</th><th>Sat</th>
  61.         <th>Sun</th>
  62.     </tfoot>
  63. </table>

其实我觉得这是个笨办法，这里采用了硬编码的形式，意味着不会随着月份的改变而改变。可能原作者的意图在于尽量将过程简化了，以便于他人理解。
我很喜欢这一款日历的样式，嘿嘿，有机会就在他的基础上增加些功能。

  1. table {
  2.     border-collapse: separate;
  3.     border: 1px solid #9DABCE;
  4.     border-width: 0px 0px 1px 1px;
  5.     margin: 10px auto;
  6.     font-size: 20px;
  7. }
  8. td, th {
  9.     width: 81px;
  10.     height: 81px;
  11.     text-align: center;
  12.     vertical-align: middle;
  13.     background: url(../img/cells.png);
  14.     color: #444;
  15.     position: relative;
  16. }
  17. th {
  18.     height: 30px;
  19.     font-weight: bold;
  20.     font-size: 14px;
  21. }
  22. td:hover, th:hover {
  23.     background-position: 0px -81px;
  24.     color: #222;
  25. }
  26. td.date_has_event {
  27.     background-position: 162px 0px;
  28.     color: white;
  29. }
  30. td.date_has_event:hover {
  31.     background-position: 162px -81px;
  32. }
  33. td.padding {
  34.     background: url(../img/calpad.jpg);
  35. }
  36. td.today {
  37.     background-position: 81px 0px;
  38.     color: white;
  39. }
  40. td.today:hover {
  41.     background-position: 81px -81px;
  42. }

样式相当不错，值得借鉴。有个问题就是日历的大小不好调，因为其单元格所用的图片尺寸是固定的。

看了下demo，在13号有包含事件。

  1. <td class="date_has_event">
  2.     13
  3.     <div class="events">
  4.         <ul>
  5.             <li>
  6.                 <span class="title">Event 1</span>
  7.                 <span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
  8.             </li>
  9.             <li>
  10.                 <span class="title">Event 2</span>
  11.                 <span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  12.             </li>
  13.         </ul>
  14.     </div>
  15. </td>

弹出事件层的样式

  1. .events {
  2.     position: relative;
  3. }
  4. .events ul {
  5.     text-align: left;
  6.     position: absolute;
  7.     display: none;
  8.     z-index: 1000;
  9.     padding: 15px;
  10.     background: #E7ECF2 url(../img/popup.png) no-repeat;
  11.     color: white;
  12.     border: 1px solid white;
  13.     font-size: 15px;
  14.     width: 200px;
  15.     -moz-border-radius: 3px;
  16.     -khtml-border-radius: 3px;
  17.     -webkit-border-radius: 3px;
  18.     -border-radius: 3px;
  19.     list-style: none;
  20.     color: #444444;
  21.     -webkit-box-shadow: 0px 8px 8px #333;
  22. }
  23. .events li {
  24.     padding-bottom: 5px;
  25. }
  26. .events li span {
  27.     display: block;
  28.     font-size: 12px;
  29.     text-align: justify;
  30.     color: #555;
  31. }
  32. .events li span.title {
  33.     font-weight: bold;
  34.     color: #222;
  35. }

来看其javascript代码

  1. $(function () {
  2.     $('.date_has_event').each(function () {
  3.         // 参数
  4.         var distance = 10;
  5.         var time = 250;
  6.         var hideDelay = 500;
  7.  
  8.         var hideDelayTimer = null;
  9.  
  10.         var beingShown = false;
  11.         var shown = false;
  12.  
  13.         var trigger = $(this);
  14.         var popup = $('.events ul', this).css('opacity', 0);
  15.  
  16.         // 绑定鼠标经过和移出事件
  17.         $([trigger.get(0), popup.get(0)]).mouseover(function () {
  18.             // 停止隐藏事件
  19.             if (hideDelayTimer) clearTimeout(hideDelayTimer);
  20.  
  21.             // 如果已经显示不再触发事件
  22.             if (beingShown || shown) {
  23.                 return;
  24.             } else {
  25.                 beingShown = true;
  26.  
  27.                 // 重置弹出层位置
  28.                 popup.css({
  29.                     bottom: 20,
  30.                     left: -76,
  31.                     display: 'block' // 显示弹出层
  32.                 })
  33.  
  34.                 // 动画开始，改变透明度和离底部位置
  35.                 .animate({
  36.                     bottom: '+=' + distance + 'px',
  37.                     opacity: 1
  38.                 }, time, 'swing', function() {
  39.                     // 当动画结束后
  40.                     beingShown = false;
  41.                     shown = true;
  42.                 });
  43.             }
  44.         }).mouseout(function () {
  45.  
  46.             if (hideDelayTimer) clearTimeout(hideDelayTimer);
  47.  
  48.  
  49.             hideDelayTimer = setTimeout(function () {
  50.                 hideDelayTimer = null;
  51.                 popup.animate({
  52.                     bottom: '-=' + distance + 'px',
  53.                     opacity: 0
  54.                 }, time, 'swing', function () {
  55.                     // 当动画完成后
  56.                     shown = false;
  57.                     // 隐藏弹出层
  58.                     popup.css('display', 'none');
  59.                 });
  60.             }, hideDelay);
  61.         });
  62.     });
  63. });

原文：http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. hiro

    还在使用table，那就不华丽了

同类