動態改變UpdatePanelAnimation的長度

摘要:動態改變UpdatePanelAnimation的長度

動態依資料量的不同,改變UpdatePanelAnimation所顯示的長度!


 

資料為二筆.一行的長度 (紅色框框區)

 

資料為五筆.二行的長度 (紅色框框區)

 


 

*.aspx

01 function getHeight()
02         {
03             //lblCount表示資料的筆數
04             var height = document.getElementById('<%=lblCount.ClientID %>').innerHTML;
05                   
06             //隱藏loading的圖示
07             var loading = document.getElementById('<%=imgLoad.ClientID %>');
08             loading.style.display='none';
09             
10             //依筆數來傳回相對的長度
11             if ( height == "" || height == 0)
12                 return "90px";
13             else
14             {
15                 var value;
16                 if (height % 3 == 0)
17                     value = ((height / 3) * 90) + "px";
18                 else
19                     value = ((height / 3 + 1) * 90) + "px";
20                 return value;
21             }

22             
23         }

……

01 <AjaxControlToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="update">
02     <Animations>
03         <OnUpdating>
04             <Sequence>
05                 <%-- Store the original height of the panel
06                 <ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />--%>
07                
08                 <%-- Disable all the controls --%>
09                 <Parallel duration="0">
10                     <EnableAction AnimationTarget="btnSelect" Enabled="false" />
11                     <EnableAction AnimationTarget="cblSelect" Enabled="false" />
12                     <EnableAction AnimationTarget="lbtnThisMon" Enabled="false" />
13                     <EnableAction AnimationTarget="lbtnNextMon" Enabled="false" />
14                     <EnableAction AnimationTarget="tbxInput" Enabled="false" />
15                     <EnableAction AnimationTarget="TagCloud1" Enabled="false" />
16                     <HideAction AnimationTarget="imgLoad" visible="true" />
17                 </Parallel>
18                 <StyleAction Attribute="overflow" Value="hidden" />
19                
20                 <%-- Do each of the selected effects --%>
21                 <Parallel duration=".50" Fps="30">
22                     <Condition ConditionScript="true">
23                         <FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
24                     </Condition>
25                     <Condition ConditionScript="true">
26                         <Resize Height="0" />
27                     </Condition>
28                     <Condition ConditionScript="true">
29                         <Color AnimationTarget="up_container" PropertyKey="backgroundColor"
30                             EndValue="#FFFFFF" StartValue="#151515" />
31                     </Condition>
32                 </Parallel>
33             </Sequence>
34         </OnUpdating>
35         <OnUpdated>
36             <Sequence>
37                 <%-- Do each of the selected effects --%>
38                 <Parallel duration=".50" Fps="30">
39                     <Condition ConditionScript="true">
40                         <FadeIn AnimationTarget="up_container" minimumOpacity=".2" />
41                     </Condition>
42                     <Condition ConditionScript="true">
43                         <Resize HeightScript="getHeight()" />
44                     </Condition>
45                     <Condition ConditionScript="true">
46                         <Color AnimationTarget="up_container" PropertyKey="backgroundColor"
47                             StartValue="#FFFFFF" EndValue="#151515" />
48                     </Condition>
49                 </Parallel>
50                
51                 <%-- Enable all the controls --%>
52                 <Parallel duration="0">
53                     <EnableAction AnimationTarget="btnSelect" Enabled="true" />
54                     <EnableAction AnimationTarget="cblSelect" Enabled="true" />
55                     <EnableAction AnimationTarget="lbtnThisMon" Enabled="true" />
56                     <EnableAction AnimationTarget="lbtnNextMon" Enabled="true" />
57                     <EnableAction AnimationTarget="tbxInput" Enabled="true" />
58                     <EnableAction AnimationTarget="TagCloud1" Enabled="true" />
59                 </Parallel>                            
60             </Sequence>
61         </OnUpdated>
62     </Animations>
63 </AjaxControlToolkit:UpdatePanelAnimationExtender>
64

改變長度的是在第43行,透過JavaScript來改變!