Fatal编程技术网

Responsive design 响应日历

responsive-design calendar

Responsive design 响应日历,responsive-design,calendar,Responsive Design,Calendar,我正在使用 <table> <tbody><tr class="header"> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunda

我正在使用

<table>
<tbody><tr class="header">
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr class="header">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="info">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="3" class="event">Event details</td>
</tr>....


星期一
星期二
星期三
星期四
星期五
星期六
星期日
1.
2.
3.
4.
活动详情
....
到

。。。。
来自硬编码日历。在移动设备上，7列并不能很好地工作。我更喜欢一天一行的格式

最简单或最优雅的方法是什么？我可以使用search和replace重新编码原始表，所以我有一个7列的div网格，但这可能有点“滑”。（将
替换为

？）

请查看解决方案

HTML:

JS:

/**
等高插件
平衡元素的高度。非常适合列或任何元素
需要相同大小（浮动等）。
版本1.01
更新日期：2014年1月30日
版权所有（c）2008 Rob Glazebrook（cssnewbie.com）
此程序是免费软件：您可以重新发布和/或修改它
它是根据GNU通用公共许可证的条款发布的
自由软件基金会，或者许可证的第3版，或者
（由您选择）任何更高版本。
这个节目的发布是希望它会有用，
但无任何保证；甚至没有任何关于
适销性或适合某一特定目的。见
有关更多详细信息，请参阅GNU通用公共许可证。
您应该已经收到GNU通用公共许可证的副本
和这个节目一起。如果没有，请参阅。
用法：$（对象）.equalHeights（[minHeight]，[MaxHeights]）；
示例1:$（“.cols”）.equalHeights（）；将所有列设置为相同高度。
例2：$（“.cols”）.equalHeights（400）；将所有COL设置为至少400px高。
例3：$（“.cols”）.equalHeights（100300）；科尔斯至少100岁，但不多
超过300像素高。内容过多的元素将获得滚动条。
**/
（函数（$）{
$.fn.equalHeights=函数（最小高度、最大高度）{
最高高度=（最小高度）？最小高度：0；
这个。每个（函数（）{
如果（$（this）.height（）>最高）{
最高=$（this）.height（）；
}
});
如果（（最大高度）&&最高>最大高度）最高=最大高度；
返回此值。每个（函数（）{
$（此）.height（最高）.css（“溢出”、“自动”）；
});
}
})（jQuery）；
$（“.days li”）。等高（100150）；

....</table>

<div class="calendar">
    <ul class="weekdays">
    <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    </ul>

    <ul class="days">
    <!-- add filler at beginning of month -->
    <li class="out_of_range calendar-day">
        <div class="date day_cell"></div>
    </li>
    <li class="out_of_range calendar-day">
        <div class="date day_cell"></div>
    </li>            
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 1</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 2</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 3</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 4</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 5</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 6</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 7</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 8</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 9</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 10</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 11</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 12</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 13</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 14</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 15</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 16</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 17</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 18</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 19</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 20</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 21</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 22</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 23</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 24</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 25</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 26</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 27</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 28</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 29</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 30</div>
        <div class="show-info"></div>
    </li>
    <li class="calendar-day">
        <div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 31</div>
        <div class="show-info"></div>
    </li>

    <!-- add filler at end of month -->
    <li class="out_of_range calendar-day">
        <div class="date day_cell"></div>
    </li>
    <li class="out_of_range calendar-day">
        <div class="date day_cell"></div>
    </li>
    </ul>

    <ul class="footer-weekdays">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>

<p>More info at <a href="http://www.bluekeyinteractive.com/how-to-create-a-responsive-calendar/" target="_blank">http://www.bluekeyinteractive.com/how-to-create-a-responsive-calendar/</a>

@import "compass/css3";

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: 1000px) { @content; }
  }
  @else if $point == small {
    @media (min-width: 628px)  { @content; }
  }
}

div.calendar{
    width:100%;
    padding:20px 0;
    overflow:hidden;
    clear:both;


    .weekdays,
    .footer-weekdays{
    display: none;
    }

    ul {
        margin: 0;
        padding:0;
        list-style-image: none;
    }

  li{
    height: auto;
    width: 100%;
    padding: 10px;
    max-height: 80px;
    border:2px solid #fff;
    background-color:#c3eaf6;
    .day,
    .month{
      display: inline;
    }

    .day {
      display: inline;
      @include breakpoint(small) {
    display: none;
      }
    }

    &.out_of_range {
     display: none;
    }
  }

    @include breakpoint(small) {

    .weekdays,
    .footer-weekdays{
    display: block;
    li {
        background-color:#21b0dc;
        height: 40px;
        text-align: center;
        color:#fff;
    }
    }

    .footer-weekdays li{height:20px;}

        ul{
            list-style: none;
            padding: 0;
            margin: 0;
            clear: both;
            width: 100%;
            li{
                display: block;
                float: left;
                height: auto;
            max-height: 150px;
                width: 14.2857142857%;
                padding: 10px;

                &.out_of_range {
                    display: block;
                }
            }

        }
    }

}

/**
    Equal Heights Plugin
    Equalize the heights of elements. Great for columns or any elements
    that need to be the same size (floats, etc).

    Version 1.01
    Updated 1/30/2014

    Copyright (c) 2008 Rob Glazebrook (cssnewbie.com) 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.

    Usage: $(object).equalHeights([minHeight], [maxHeight]);

    Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
    Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
    Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
    than 300 pixels tall. Elements with too much content will gain a scrollbar.
**/

   (function($) {
     $.fn.equalHeights = function(minHeight, maxHeight) {
      tallest = (minHeight) ? minHeight : 0;
      this.each(function() {
       if($(this).height() > tallest) {
    tallest = $(this).height();
      }
    });
      if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
      return this.each(function() {
       $(this).height(tallest).css("overflow","auto");
     });
    }
  })(jQuery);

$(".days li").equalHeights(100,150);