这是我正在使用的页面。但是该部分中的调整大小部分似乎不起作用。我从Ajax site复制了大部分代码。我在标签(第108行)中放置了一个alert()以找到'b._originalHeight'的值,它显示为'44'。我也尝试过上述教程中的代码(第132行),但也没有用。 (我不知道从哪里得到这个值。但我需要它来显示表格上的所有控件。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddEditContest.ascx.cs" Inherits="TMPInternational.Spawn2DotComAdmin.Contest.UserControls.AddEditContest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="uc" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register TagPrefix="ew" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" Namespace="eWorld.UI" %>
<h1 style="margin-left:8px">Add/Edit Contest</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<div style="text-align:left;width:500px; margin-left:8px">
<div id="PanelContainer">
<asp:UpdatePanel ID="AddEditContestUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<div id="background" style="text-align:left; height: 44px;">
<asp:Panel ID="ContestList" runat="server">
<asp:datagrid AllowSorting="false" id="ContestGrid" GridLines="None" CellPadding="5"
Width="100%" AutoGenerateColumns="False" AlternatingItemStyle-BackColor="#cccccc"
HeaderStyle-Font-Size="15px" HeaderStyle-Font-Bold="true" HeaderStyle-BackColor="#888f9b"
Runat="server" AllowPaging="True" PageSize="10"
PagerStyle-NextPageText="Next >>" PagerStyle-PrevPageText="<< Back" >
<Columns>
<asp:HyperLinkColumn DataNavigateUrlField="ContestID" DataNavigateUrlFormatString="../?Load=AddEditContest&Type=Edit&ContestID={0}"
DataTextField="Title" ItemStyle-width="30%" headertext="Contest Title" />
<asp:BoundColumn DataField="StartDate" ItemStyle-Width="35%" HeaderText="Start Date" />
<asp:BoundColumn DataField="EndDate" ItemStyle-Width="35%" HeaderText="End Date" />
</Columns>
</asp:datagrid>
<div style="text-align:right;">
<asp:ImageButton ID="AddContest" runat="server"
ImageUrl="~/Contest/Images/Add.png" AlternateText="Add Contest"
onclick="AddContest_Click" />
</div>
</asp:Panel>
<asp:Panel ID="FieldsPanel" runat="server">
<p /><b>Title</b>
<br />
<asp:TextBox Runat="server" id="TitleText" />
<asp:RequiredFieldValidator id="TitleValidator" runat="server" ForeColor="Red"
ErrorMessage="Please add a title" ControlToValidate="TitleText">*</asp:RequiredFieldValidator>
<p /><b>Contest Description</b>
<br />
Use HTML tags to format this area. Start paragraphs with
<p /> tag, bold items with <b></b> tags. Create a
line-break between lines with one <br /> tag.<br />
<asp:TextBox Runat="server" ID="DescriptionText" TextMode="MultiLine" Width="400" Height="200" />
<asp:RequiredFieldValidator id="DescriptionValidator" runat="server" ErrorMessage="Please add a description"
ControlToValidate="DescriptionText" ForeColor="Red">*</asp:RequiredFieldValidator>
<p />
<b>Contest Start Date</b>
<br />
<ew:CalendarPopup id="StartDate" runat="server" Text="Change Date" Width="75px" MonthYearArrowImageUrl="~/Images/monthchange.gif"
CalendarLocation="Left" ControlDisplay="TextBoxImage" ImageUrl="~/Images/calendar.gif" MonthYearPopupApplyText="Select"
CalendarWidth="150" UseExternalResource="True" ExternalResourcePath="~/Scripts/CalendarPopup.js" Nullable="False">
<WeekdayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" Font-Size="9pt" />
<MonthHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="#669AC1" />
<OffMonthStyle ForeColor="Gray" BackColor="White" Font-Size="9pt" />
<GoToTodayStyle Font-Names="Arial" ForeColor="Black" BackColor="White"/>
<TodayDayStyle Font-Bold="True" ForeColor="#669AC1" BackColor="White" />
<DayHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="Blue" BackColor="White" />
<WeekendStyle Font-Names="Arial" ForeColor="Blue" BackColor="LightGray" Font-Size="9pt" />
<SelectedDateStyle Font-Bold="True" ForeColor="White" BackColor="#669AC1" Font-Size="9pt"/>
<HolidayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" />
</ew:CalendarPopup>
<ew:TimePicker id="StartTime" runat="server" ControlDisplay="TextboxImage" Text="Change Time"
ImageUrl="~/Images/clock.gif" NumberOfColumns="4" Scrollable="True" Width="75px">
<TimeStyle ForeColor="Blue" BackColor="White" Font-Size="9pt" />
<SelectedTimeStyle ForeColor="Blue" BackColor="Gray" />
</ew:TimePicker>
<p/><b>Contest End Date</b>
<br />
<ew:CalendarPopup id="EndDate" runat="server" Text="Change Date" Width="75px" MonthYearArrowImageUrl="~/Images/monthchange.gif"
CalendarLocation="Left" ControlDisplay="TextBoxImage" ImageUrl="~/Images/calendar.gif" MonthYearPopupApplyText="Select"
CalendarWidth="150" UseExternalResource="True" ExternalResourcePath="~/Scripts/CalendarPopup.js" Nullable="False">
<WeekdayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" Font-Size="9pt" />
<MonthHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="#669AC1" />
<OffMonthStyle ForeColor="Gray" BackColor="White" Font-Size="9pt" />
<GoToTodayStyle Font-Names="Arial" ForeColor="Black" BackColor="White"/>
<TodayDayStyle Font-Bold="True" ForeColor="#669AC1" BackColor="White" />
<DayHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="Blue" BackColor="White" />
<WeekendStyle Font-Names="Arial" ForeColor="Blue" BackColor="LightGray" Font-Size="9pt" />
<SelectedDateStyle Font-Bold="True" ForeColor="White" BackColor="#669AC1" Font-Size="9pt"/>
<HolidayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" />
</ew:CalendarPopup>
<ew:TimePicker id="EndTime" runat="server" ControlDisplay="TextboxImage" Text="Change Time"
ImageUrl="~/Images/clock.gif" NumberOfColumns="4" Scrollable="True" Width="75px">
<TimeStyle ForeColor="Blue" BackColor="White" Font-Size="9pt" />
<SelectedTimeStyle ForeColor="Blue" BackColor="Gray" />
</ew:TimePicker>
<p />
<asp:ImageButton ID="SaveContestButton" runat="server" AlternateText="Confirm"
ImageUrl="~/Contest/Images/Confirm.png" onclick="SaveContestButton_Click" />
</asp:Panel>
<br />
<asp:Label ID="MessageLabel" runat="server" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SaveContestButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<uc:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="AddEditContestUpdatePanel">
<Animations>
<OnUpdating>
<Sequence>
<%-- Store the original height of the panel --%>
<ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />
<%-- Disable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="SaveDefaultDescriptionButton" Enabled="false" />
</Parallel>
<StyleAction Attribute="overflow" Value="hidden" />
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<FadeOut AnimationTarget="PanelContainer" minimumOpacity=".2" />
<Resize Height="0px" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<FadeIn AnimationTarget="PanelContainer" minimumOpacity=".2" />
<Length duration="2" fps="40" Property="style" PropertyKey="height"
StartValue="10" EndValueScript="$get('animation').offsetHeight"
AnimationTarget="animation" />
<%--Also tried the below
<Resize HeightScript="$find('animation')._originalHeight" />
--%>
</Parallel>
<%-- Enable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="SaveDefaultDescriptionButton" Enabled="true" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</uc:UpdatePanelAnimationExtender>
</div>
答案 0 :(得分:1)
我不确定这是否是唯一的事情 - 这只是跳出来的第一件事:但是根据reference docs,您的<Resize Height="0px" />
代码应该是{{} 1}}。
为什么第二个<Resize Height="0" Unit="px" />
比<Parallel> Duration
更短?
抱歉,这不是一个真正的答案,只是我乍一看可能遇到的一些问题的注意事项
答案 1 :(得分:1)
在观看Joe Stagner's video之后,我也试图实现ASP.NET AJAX UpdatePanelAnimation Extender,我也很难实现调整大小动画。
我的问题如下:
我没有将System.Threading.Thread.Sleep(1000)语句添加到服务器端事件处理程序。
您的代码示例不包含您的代码隐藏,因此这可能是您的问题。
这是另一个猜测:
如果您在'Resize'标签上指定'AnimationTarget'属性,则可能会有所帮助。
<Resize AnimationTarget="PanelContainer" Height="0px" />
{...}
<Resize AnimationTarget="PanelContainer" HeightScript="$find('animation')._originalHeight" />