摘要:動態改變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 }
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
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來改變!