Question

我正在试图在HTML5和Jquery中设计一个日历。我的代码是

HTML

<body>
        <div id="PageContainer">
            <div id="Calendar">
                <div id="MonthBar">February 2014</div>
                <div class="DayHeadding">Monday</div>
                <div class="DayHeadding">Tuesday</div>
                <div class="DayHeadding">Wednesday</div>
                <div class="DayHeadding">Thursday</div>
                <div class="DayHeadding">Friday</div>
                <div class="DayHeadding">Saturday</div>
                <div class="DayHeadding">Sunday</div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay">1</div>
                <div class="MonthDay">2</div>
                <div class="MonthDay">3</div>
                <div class="MonthDay">4</div>
                <div class="MonthDay">5</div>
                <div class="MonthDay">6</div>
                <div class="MonthDay">7</div>
                <div class="MonthDay">8</div>
                <div class="MonthDay ToDay">9</div>
                <div class="MonthDay">10</div>
                <div class="MonthDay">11</div>
                <div class="MonthDay">12</div>
                <div class="MonthDay">13</div>
                <div class="MonthDay">14</div>
                <div class="MonthDay">15</div>
                <div class="MonthDay">16</div>
                <div class="MonthDay">17</div>
                <div class="MonthDay">18</div>
                <div class="MonthDay">19</div>
                <div class="MonthDay">20</div>
                <div class="MonthDay">21</div>
                <div class="MonthDay">22</div>
                <div class="MonthDay">23</div>
                <div class="MonthDay">24</div>
                <div class="MonthDay">25</div>
                <div class="MonthDay">26</div>
                <div class="MonthDay">27</div>
                <div class="MonthDay">28</div>
                <div class="MonthDay NoMonthDay"></div>
            </div>
        </div>
    </body>

CSS

html, body{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    width: 100%;
    height: 100%;
}
body{
    min-height: 100%;
}
#PageContainer{
    width: 100%;
    height: 100%;
    float: left;
}
#Calendar {
    width: 100%;
    height: 100%;
    float: left;
    /*display: table;*/
}
#MonthBar{
    float: left;
    width: 100%;
    height: 10%;
    color: #ffffff;
    background-color: #c0392b;
    text-align: center;
}

.DayHeadding, .MonthDay{
    float: left;
    width: 14%;
    color: #ffffff;
    background-color: #d35400;
    text-align: center;
    border-left: 1px dotted #FFFFFF;
    border-top: 1px dotted #FFFFFF;
    position: relative;
    display: table-cell;
}
.DayHeadding{
    background-color: #e74c3c;
    height: 5%;
}
.MonthDay{
    height: 16%;
    cursor: pointer;
}
.NoMonthDay{
    background-color: #e67e22;
}
.ToDay{
    background-color: #f39c12;
}

和 Jquery

$(document).ready(function() {
    $(".MonthDay").click(function(evt) {
        // Animate this div to 100% width and 100% height to cover the whole screen and hide every thing
    });
});

当点击任何.MonthDay div时，想要通过漂亮的动画将其最大化为全屏，只是将它花在四个方向并占据整个屏幕。

按照相应的方向将所有内容推出屏幕或
将div扩展到其他内容

我怎么做？请帮帮我。

enter image description here

Answer 1

这是一个简单的jQuery动画，可以解决这个问题。

$('.MonthDay').on('click', function(e) {
    $(e.target).animate({width: '100%', height: 500}, 500);
});

height: 100%与width: 100%的工作方式不同，因此您可以像我上面的示例中那样设置固定高度，也可以缓存一些父元素的高度并使用它。

这是一个小提琴：http://jsfiddle.net/BQsQD/

Answer 2

试试this。 CSS“only”解决方案，您只需添加和删除CSS类。

.MonthDay.fullSize{
   position: absolute;
   top: 10%;
   left: 0;
    z-index: 2;
   height: 100% !important;
   width: 100% !important;
   transition: all 1s;
}

和JavaScript方面：

$(".MonthDay").click(function(evt) {
        $(this).addClass('fullSize');
});

Answer 3

您可以使用插件创建一个与屏幕大小相同的弹出窗口，并使用您希望的任何信息填充它。

这里我使用了一个jquery UI对话框来显示弹出窗口（虽然不是全屏）但你可以使用任何其他插件。

$(".MonthDay").click(function(evt) {
    $("#dialog").text("Clicked on " + $(this).text());
    $("#dialog").dialog();
});

Fiddle

Answer 4

将以下类添加到您的css

.full {
    height:100% !important;
    width:100% !important;
}

然后使用以下jquery

$(document).ready(function () {
    $(".MonthDay").click(function (evt) {
        $(this).toggleClass("full");
    });
});

单击时会调整为100％，再次单击时会恢复正常大小

看看demo http://jsfiddle.net/QZHFR/

Jquery将div设置为100％高度和宽度的动画

4 个答案:

Fiddle