animation.aspx

AJAX 应用 实现页面的无刷新

                </OnMouseOut>
             </Animations>
        </ajaxToolkit:AnimationExtender>
        
        <asp:Panel ID="xmlShow" runat="server" style="display: none; z-index: 3; background-color:#DDD; border: thin solid navy;">
            <pre style="margin: 5px">&lt;ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo"&gt;
&lt;Animations&gt;
    &lt;OnClick&gt;
        &lt;Sequence&gt;
           <em>&lt;%-- Disable the button --%&gt;</em>
            &lt;EnableAction Enabled="false" /&gt; 
           <em>&lt;%-- Show the flyout --%&gt;</em>
            &lt;Parallel AnimationTarget="flyout" Duration=".3" Fps="25"&gt;
                &lt;Move Horizontal="150" Vertical="-50" /&gt;
                &lt;Resize Height="260" Width="280" /&gt;
                &lt;Color AnimationTarget="flyout" PropertyKey="backgroundColor"
                        StartValue="#AAAAAA" EndValue="#FFFFFF" /&gt;
            &lt;/Parallel&gt;
          <em>&lt;%-- Fade in the text --%&gt; </em>
            &lt;FadeIn AnimationTarget="info" Duration=".2"/&gt;
          <em>&lt;%-- Cycle the text and border color to red and back --%&gt;</em>
            &lt;Parallel AnimationTarget="info" Duration=".5"&gt;
                &lt;Color PropertyKey="color"
                        StartValue="#666666" EndValue="#FF0000" /&gt;
                &lt;Color PropertyKey="borderColor"
                        StartValue="#666666" EndValue="#FF0000" /&gt;
            &lt;/Parallel&gt;
            &lt;Parallel AnimationTarget="info" Duration=".5"&gt;
                &lt;Color PropertyKey="color"
                        StartValue="#FF0000" EndValue="#666666" /&gt;
                &lt;Color PropertyKey="borderColor"
                        StartValue="#FF0000" EndValue="#666666" /&gt;
                &lt;FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" /&gt;
            &lt;/Parallel&gt;
        &lt;/Sequence&gt;
    &lt;/OnClick&gt;
&lt;/Animations&gt;
&lt;/ajaxToolkit:AnimationExtender&gt;</pre>
        </asp:Panel>
        
        <asp:Panel ID="xmlClose" runat="server" style="display: none; z-index: 3; background-color: #DDD; border: thin solid navy;">
            <pre style="margin: 5px">&lt;ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose"&gt;
&lt;Animations&gt;
    &lt;OnClick&gt;
        &lt;Sequence AnimationTarget="info"&gt;
          <em>&lt;%-- Scale the flyout down to 5% to make it disappear --%&gt;</em>
            &lt;Parallel Duration=".3" Fps="15"&gt;
                &lt;Scale ScaleFactor="0.05" Center="true"
                        ScaleFont="true" FontUnit="px" /&gt;
                &lt;FadeOut /&gt;
            &lt;/Parallel&gt;
          <em>&lt;%-- Reset the styles on the info box --%&gt;</em>
            &lt;StyleAction Attribute="display" Value="none"/&gt;
            &lt;StyleAction Attribute="width" Value="250px"/&gt;
            &lt;StyleAction Attribute="height" Value=""/&gt;
            &lt;StyleAction Attribute="fontSize" Value="12px"/&gt;
          <em>&lt;%-- Re-enable the button --%&gt;</em>
            &lt;EnableAction Enabled="true"
                    AnimationTarget="btnInfo" /&gt;
        &lt;/Sequence&gt;
    &lt;/OnClick&gt;
&lt;/Animations&gt;
&lt;/ajaxToolkit:AnimationExtender&gt;
        </pre>
        </asp:Panel>
        
        <ajaxToolkit:HoverMenuExtender ID="hm2" runat="server" TargetControlID="lnkShow" PopupControlID="xmlShow" PopupPosition="Bottom" />
        <ajaxToolkit:HoverMenuExtender ID="hm1" runat="server" TargetControlID="lnkClose" PopupControlID="xmlClose" PopupPosition="Bottom" />
    </div>
    <div class="demobottom"></div>
    
    <asp:Panel ID="description_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" AlternateText="collapse"  />
            Animation Description
        </div>
    </asp:Panel>
    <asp:Panel id="description_ContentPanel" runat="server" style="overflow:hidden;">
        <p>    
            The <span class="codeReference">AnimationExtender</span> is a simple extender that allows you to
            utilize the powerful animation framework with existing pages in an easy, declarative fashion.  It
            plays animations whenever a specific event like <span class="codeReference">OnLoad</span>,
            <span class="codeReference">OnClick</span>, <span class="codeReference">OnMouseOver</span>, or
            <span class="codeReference">OnMouseOut</span> is raised by the target control.
        </p>
        <br />
        <p>
            The animations to be played are declaratively specified using XML.  You can read the
            <a href="../Walkthrough/UsingAnimations.aspx">Using Animations</a> walkthrough for more details
            about creating these generic animation declarations, as well as other ways to use the animation
            framework.  The framework provides a lot of useful animations to handle movement, resizing, fading,
            etc.  All the animations and their properties are described in the
            <a href="../Walkthrough/AnimationReference.aspx">Animation Reference</a>.
        </p>
    </asp:Panel>

    <asp:Panel ID="Properties_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand"  />
            Animation Properties
        </div>
    </asp:Panel>
    <asp:Panel id="Properties_ContentPanel" runat="server" style="overflow:hidden;" Height="0px">
        The animation behavior can be applied with the following extender (the <em>italic</em> properties
        are optional, and the ellipses represent a generic animation description):<br /><br />
<pre>&lt;ajaxToolkit:AnimationExtender ID="ae"
  runat="server" TargetControlID="ctrl"&gt;
    <em>&lt;Animations&gt;
        &lt;OnLoad&gt; ... &lt;/OnLoad&gt;
        &lt;OnClick&gt; ... &lt;/OnClick&gt;
        &lt;OnMouseOver&gt; ... &lt;/OnMouseOver&gt;
        &lt;OnMouseOut&gt; ... &lt;/OnMouseOut&gt;
        &lt;OnHoverOver&gt; ... &lt;/OnHoverOver&gt;
        &lt;OnHoverOut&gt; ... &lt;/OnHoverOut&gt;
    &lt;/Animations&gt;</em>
&lt;/ajaxToolkit:AnimationExtender&gt;</pre>
        <ul>
            <li><strong>TargetControlID</strong> - ID of the target control whose events are used to animate
                (this is also the default target of the animations)</li>
            <li><strong>OnLoad</strong> - Generic animation played as soon as the page is loaded</li>
            <li><strong>OnClick</strong> - Generic animation played when the target control is clicked</li>
            <li><strong>OnMouseOver</strong> - Generic animation played when the mouse moves over the target control</li>
            <li><strong>OnMouseOut</strong> - Generic animation played when the mouse moves out of the target control</li>
            <li><strong>OnHoverOver</strong> - Generic animation similar to OnMouseOver except it will stop
                the OnHoverOut animation before it plays</li>
            <li><strong>OnHoverOut</strong> - Generic animation similar to OnMouseOut except it will stop the
                OnHoverOver animation before it plays</li>
        </ul>
    </asp:Panel>

    <ajaxToolkit:CollapsiblePanelExtender ID="DescriptionCPE" runat="Server"
        TargetControlID="description_ContentPanel"
        ExpandControlID="description_HeaderPanel"
        CollapseControlID="description_HeaderPanel"
        Collapsed="False"        
        ImageControlID="description_ToggleImage" />
    <ajaxToolkit:CollapsiblePanelExtender ID="PropertiesCPE" runat="Server"
        TargetControlID="Properties_ContentPanel"
        ExpandControlID="Properties_HeaderPanel"
        CollapseControlID="Properties_HeaderPanel"
        Collapsed="True"        
        ImageControlID="Properties_ToggleImage" />
</asp:Content>