Question

我想显示3天活动的日历。我希望它看起来像这样： enter image description here

第1,2,3天是链接，点击后我想让日历像滑块一样滑动到下一个日历。我一直在网上搜索“html网站日历显示”，“jquery日历插件”等等，我想要的东西都没有出现。我真的不明白我将如何实现这个，这是纯粹的HTML + CSS还是它有jquery？我在哪里可以找到一些演示/教程来设计和实现上面的日历？

Answer 1

new： jsBin demo with hidden data inside fields and popup

jsBin demo

<强> jQuery的：

var start_day = 0; // set your start day to show first!

$('.day').fadeTo(0,0.3).eq(start_day).fadeTo(0,1);
$('ul#calendar_navigation li').eq(start_day).addClass('active');

var calWidth = $('#calendar').width();

$('ul#calendar_navigation li').click(function(){

    $('ul#calendar_navigation li').removeClass('active');
    $(this).addClass('active');

    var thisIndex = $(this).index();

    $('.day').stop().fadeTo(300,0.3).eq(thisIndex).fadeTo(300,1);
    $('#days').stop().animate({left: '-'+calWidth*thisIndex },800);

});

<强> HTML：

    <ul id="calendar_navigation">
      <li>Day 1</li>
      <li>Day 2</li>
      <li>Day 3</li> 
    </ul>

    <div id="days">

     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 1 (oct 3)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>    
    <!-- -->
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 2 (oct 4)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>
   <!-- -->
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 3 (oct 5)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>      

    </div><!-- days -->

  </div>
  </div><!-- cal. wrapper -->

<强> CSS：

body{
  font-family:arial;
}
/* CALENDAR */
#calendar_wrapper{
  position:relative;
  margin:0 auto;
  width:100%;
  overflow:hidden;
}
#calendar{
  position:relative;
  margin:0 auto;
  width:800px;
}
ul#calendar_navigation{
  list-style:none;
  padding:0;
  font-size:30px;
  height:30px;
}
ul#calendar_navigation li{
  padding-right:30px;
  display:block;
  float:left;
  list-style:none; 
}
ul#calendar_navigation li.active{
  list-style:none; 
  border-bottom:5px solid #C5FF74;
}
#days{
  clear:both;
  position:relative;
  width:999999px;
}
.day{
  position:relative;
  float:left;
  left:0px;
  width:800px;
  box-shadow:0px 2px 4px #999;
}

#calendar table{
    font-size:13px;
    width:100%;
}

#calendar table tr th,
#calendar table tr td{
  vertical-align:middle;
  height:50px;
  width:15%;
  padding:1%;
}
#calendar table tr td{
  background-color:#C5FF74;
}

#calendar table tr{
  vertical-align:middle;
}

#calendar table tr td:first-child{
  width:140px;
}

Answer 2

我建议你看看SlidesJS。您需要使用自定义分页。

网站日历滑块

2 个答案:

jsBin demo