2017-02-19 6 views
0

CSSカレンダーとJqueryを使用して、ASPカレンダーでアニメーションを作成しようとしています。私はCSSを使用してカレンダーを隠し、いくつかのイベントが発生したときに、私はただフェードインします。カレンダーはAJAXの更新パネルの中にあります。カレンダーで1日をクリックすると、私の問題が発生します。 CSSは再起動してカレンダーを隠してしまい、Jquery(もちろん)は消えません。私が望むのは、クリックしてカレンダーを隠すのを避けることです。アイブは多くのことを試みましたが、何も動作しません。ここに私のコードの一部は次のとおりです。カレンダーのクリックによるCSS再アニメーションの防止方法

はJavaScript:

$(document).ready(
function() 
{ 
    ... 
    var invoiceB = $(".invoiceBtnPos"); 
    invoiceB.animate({ left: '92%' }, 1500, 
     function() { 
      var UserCalendarC = $("#UserCalendar"); 

      UserCalendarC.fadeIn({ duration: 1500 }); 

      UserCalendarC.classList.remove("DHidden"); 
     });  
    }); 

CSS

.DHidden { display:none; } 

ASPX

<asp:UpdatePanel ID="UpdateUserPanel" runat="server"> 
     <contenttemplate> 
      <fieldset class="ZeroDecoration"> 
      ... 
        <asp:Calendar ID="UserCalendar" ClientIDMode="Static" runat="server" CssClass="Calendar DHidden" DayNameFormat="Full" ShowGridLines="True" Width="26%" Height="425px" 
         OnDayRender="UserCalendar_DayRender" NextMonthText="<img src='../Images/nextimg.png' border='0' width='60%' height='auto'>" 
         PrevMonthText="<img src='../Images/previmg.png' border='0' width='60%' height='auto'>" OnSelectionChanged="UserCalendar_SelectionChanged" > 
         <DayHeaderStyle CssClass="DayHeaderStyle" /> 
         <DayStyle CssClass="DayStyle no_underline" ForeColor="White" /> 
         <WeekendDayStyle CssClass="WeekendDayStyle no_underline" /> 
         <NextPrevStyle CssClass="NextPrevStyle" /> 
         <OtherMonthDayStyle CssClass="OtherMonthDayStyle no_underline" /> 
         <SelectedDayStyle CssClass="SelectedDayStyle no_underline" /> 
         <SelectorStyle CssClass="SelectorStyle" /> 
         <TitleStyle CssClass="TitleStyle" /> 
         <TodayDayStyle CssClass="TodayDayStyle no_underline" /> 
        </asp:Calendar> 
       ... 
      </fieldset> 
     </contenttemplate>    
    </asp:UpdatePanel> 

CS

protected void UserCalendar_DayRender(object sender, DayRenderEventArgs e) 
{    
    e.Cell.Text += e.Day.DayNumberText; 
    e.Cell.ToolTip = e.Day.Date.ToShortDateString(); 
    e.Cell.Attributes.Add("OnClick",e.SelectUrl); 
} 

protected void UserCalendar_SelectionChanged(object sender, EventArgs e) 
{ 
    currentDate.Text = UserCalendar.SelectedDate.ToLongDateString(); 
} 

私がやった最接近は冒頭で、また、JavaScriptでの表示プロパティを設定しますが、動作が奇妙に見えます(表示、非表示、その後、フェードイン)することです...

window.onload = function() 
{ 
    var calendar = $("#UserCalendar"); 

    calendar.css("display", "none"); 
} 

その私の最初の時間ここに尋ねます私が作ったかもしれないすべての間違いをお詫びします。

答えて

0

私は質問を投稿した後にそれを修正すると思います(私は愚かなことです)。非常にきれいではありませんが、私にとって、それは一日保存し

protected void UserCalendar_SelectionChanged(object sender, EventArgs e) 
    { 
     UserCalendar.CssClass = "Calendar"; 
     currentDate.Text = UserCalendar.SelectedDate.ToLongDateString(); 
    } 

私が知っている:私は、それだけで選択のCSSをオーバーライドすると、カレンダーの変更、次のように解決します。私の質問で時間を無駄にするすべての人に感謝します。

関連する問題