Posted on 2007-09-07 10:46
yuanws 阅读(578)
评论(8) 编辑 收藏
微软的示例中是点击一个按钮实现效果，而且AnimationExtender要绑定这个按钮
在gridview的行中的按钮可是跟行一样多，而且还得确保每次AnimationExtender显示的内容不一样
以下是实现方法。
1. 上来当然还是把控件添到网页
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button2">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false" />
<ScriptAction Script="Cover($get('ctl00_SampleContent_btnInfo'), $get('flyout'));" />
<ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
<StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
<FadeIn AnimationTarget="info" Duration=".2"/>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
<Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
</Parallel>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
<FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
</Parallel>
</Sequence>
</OnClick></Animations>
</cc1:AnimationExtender>
<cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="info">
<%-- Shrink the info panel out of view --%>
<StyleAction Attribute="overflow" Value="hidden"/>
<Parallel Duration=".3" Fps="15">
<Scale ScaleFactor="0.05" ScaleFont="true" FontUnit="px" />
<FadeOut />
</Parallel>
<%-- Reset the sample so it can be played again --%>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="width" Value="95%"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="fontSize" Value="12px"/>
<OpacityAction AnimationTarget="btnCloseParent" Opacity="0" />
<%-- Enable the button so it can be played again --%>
<EnableAction AnimationTarget="Button2" Enabled="true" />
</Sequence>
</OnClick>
<OnMouseOver>
<Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
</OnMouseOut>
</Animations>
</cc1:AnimationExtender>
和AnimationExtender1关联的按钮TargetControlID="Button2" 我用样式把他隐藏
<asp:Button ID="Button2" OnClientClick="return false;" runat="server" Text="Button" style="visibility:hidden;" />
接下来是添加gridview
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
Width="655px" SkinID="GridView" OnRowDataBound="GridView1_RowDataBound" PageSize="15" OnPageIndexChanging="GridView1_PageIndexChanging" OnDataBound="GridView1_DataBound">
<Columns>
<asp:TemplateField HeaderText="日期">
<EditItemTemplate>
</EditItemTemplate>
<ItemTemplate><asp:LinkButton ID="LinkButton 3" Text='<%#Eval("l_date","{0:d}")%>' CommandArgument='<%#Eval("id") %>' runat="server" OnClick="LinkButton 3_Click" OnClientClick="javascript:document.getElementById('Button2').click();" CausesValidation="False"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="添加时间">
<EditItemTemplate>
</EditItemTemplate>
<ItemStyle Width="150px" HorizontalAlign="Center" />
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("l_adddate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="批阅">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("l_sid") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("l_reply") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="30px" ForeColor="Red" HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="修改" ShowHeader="False">
<ItemStyle Width="30px" />
<ItemTemplate>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%#string.Format("log_add.aspx?id={0}",Eval("id")) %>'>修改</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="删除" ShowHeader="False">
<ItemStyle Width="30px" />
<ItemTemplate>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="false" CommandName="del" CommandArgument='<%# Eval("id") %>' Text="删除" OnClientClick='return confirm("确定删除？");' OnClick="LinkButton2_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
主要是蓝色标记的那部分，当然后台事件自己写
还少点东西就是那个div 在把他们拷近来就可以了
<div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #D0D0D0;"></div>
<!-- Info panel to be displayed as a flyout when the button is clicked -->
<div id="info" style="display: none; width:95%; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #F3F3F3; padding: 5px; left: 10px; position: absolute; top: 10px;">
<div id="btnCloseParent" style="float: right; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
<asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close"
Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" />
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate> <table width="98%" border="0" align="center" cellpadding="3" cellspacing="1" class="table">
<tr class="hback">
<td class="xingmu" >
日志：<asp:Label ID="l_date" runat="server" Text="Label"></asp:Label> --
<asp:Label ID="u_name" runat="server" Text="Label"></asp:Label></td>
</tr>
</table>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
至此结束！