Question

我创建了一个自定义日历控件，它在大多数情况下都是完美的。我的问题是，无论何时发布，控件都会消失，即使用户仍处于悬停状态。我希望他们能够在没有divCalendarDropDown消失的情况下改变月份，日期等等。有什么建议吗？

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DateTimePickerObject.ascx.cs" Inherits="DateTimePicker.DateTimePickerObject" %>

<script type="text/javascript">
    var canHover = true;

    var calendarControl = $(".calendarControl"), flip = $(".divCalendarDropDown"),
    state = $.cookie("ToggleStatus");

    function setCalendarVisibility(className) {
        if (canHover) {
            var dropDown = document.getElementById("divCalendarDropDown");
            dropDown.className = className;
        }
    };
    function OnClick_Calendar() {
        var dropDown = document.getElementById("divCalendarDropDown");
        if (dropDown.style.height >= 1) {
            canHover = true;
            dropDown.className = 'divHidden';
        }
        else {
            canHover = false;
            dropDown.className = 'divNormal';
        };
    };
</script>
<style type="text/css">
    .textboxCalendar {
        position: relative;
        display: block;
        width: 215px;
    }
    .imgCalendar {
        position: absolute;
        left: 225px;
        top: 0px;
        margin: 0px 5px 0px 4px;
        height: 20px;
        width: auto;
    }
    .imgCalendar:hover {
        margin: 0px 7px 0px 4px;
        height: 21px;
    }
    div {
        float: left;
        width: 250px;
        top: 0px;
        margin-top: -2px;
        -webkit-transition:all ease-in-out 1s;
        -moz-transition:all ease-in-out 1s;
        -ms-transition:all ease-in-out 1s;
        -o-transition:all ease-in-out 1s;
        transition:all ease-in-out 1s;
        border-collapse: separate;
    }
        div:hover {
        }
    .divNormal {
        height: 0px;
        overflow: visible;
    }
    .divHidden {
        height: 0px;
        overflow: hidden;
    }
    .calendar {
        background-color: whitesmoke;
        position: relative;
        font-family: 'Segoe UI', Tahoma;
        opacity: 1;
    }
        .calendar a {
            font-weight: bolder;
        }
    .calendar th {
        font-weight: bold;
        color: #2C5A96;
    }
    .nextPrevStyle {
    }
    .dayHeaderStyle {
    }
    .dayStyle {
        background-color: #E3ECF7;
    }
    .otherMonthDayStyle {
        background-color:  #fbfbfb;
    }
    .selectedDayStyle {
    }
    .titleStyle {
        background-color: #E3ECF7;
    }
    .todayDayStyle {
        background-color: #fbdf93;
    }
    .weekendDayStyle {
        background-color:  #c5d6f1;
    }
    .calendarControl {
        position: relative;
        z-index: 1;
        height: auto;
        width: 252px;
    }
</style>
<div class="calendarControl">
    <asp:TextBox runat="server" ID="textboxCalendar" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');" onBlur="textboxCalendar_OnBlur()" ReadOnly="True" CssClass="textboxCalendar"></asp:TextBox>
    <span id="spanCalendar" class="spanCalendar"><img id="imgCalendar" src="calendar.png" alt="Calendar" class="imgCalendar" onclick="OnClick_Calendar();"/></span>
    <div id="divCalendarDropDown" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">
        <asp:Calendar runat="server" ID="calendarMain" OnSelectionChanged="calendarMain_SelectionChanged" CssClass="calendar" NextPrevFormat="CustomText" NextMonthText=">>" PrevMonthText="<<" SelectionMode="Day" >
            <NextPrevStyle CssClass="nextPrevStyle" />
            <DayHeaderStyle CssClass="dayHeaderStyle" />
            <DayStyle CssClass="dayStyle" />
            <OtherMonthDayStyle CssClass="otherMonthDayStyle" />
            <SelectedDayStyle CssClass="selectedDayStyle" />
            <TitleStyle CssClass="titleStyle" />
            <TodayDayStyle CssClass="todayDayStyle" />
            <WeekendDayStyle CssClass="weekendDayStyle" />
        </asp:Calendar>
    </div>
</div>

Answer 1

我把它放在评论中，但我还不能; ）

我认为您不能使用asp：Calendar控件禁用回发到服务器，因此请尝试向DIV“divCalendarDropDown”添加默认类 - 例如

<div id="divCalendarDropDown" class="divNormal" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">

如果这不起作用，我会尝试在onload上添加另一个动作，例如onblur，例如。

<div id="divCalendarDropDown" onload="setCalendarVisibility('divNormal');" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">

希望这有帮助！ JM

ASP自定义日历控件在回发时消失

1 个答案: