摘要:利用AnimationExtender作出隱藏選單
簡單說是利用兩個AnimationExtender來控制div的動作，可在div中再加入其它控制項達到更多功能。
test.aspx內容如下
01 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="EmpSkill.aspx.vb" Inherits="EmpSkill" %>
02
03 <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
04
05 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
06
07 <html xmlns="http://www.w3.org/1999/xhtml">
08 <head runat="server">
09 <title>test</title>
10 <script type="text/javascript">
11
12 function pageLoad() {
13 }
14
15 </script>
16 <link href="css/Skill.css" type="text/css" rel="stylesheet" />
17 <script type="text/javascript" src="js/skilljs.js"></script>
18 </head>
19 <body>
20 <form id="form1" runat="server">
21 <div>
22 <asp:ScriptManager ID="ScriptManager1" runat="server" />
23 <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="PanelLeft">
24 <Animations>
25 <OnMouseOver>
26 <Sequence>
27 <Move AnimationTarget="PanelLeft" Horizontal="7" Vertical="8" Duration=".5" relative="false"/>
28 </Sequence>
29 </OnMouseOver>
30 </Animations>
31 </cc1:AnimationExtender>
32 <cc1:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="IMG1">
33 <Animations>
34 <OnClick>
35 <Sequence>
36 <Move AnimationTarget="PanelLeft" Horizontal="-107" Vertical="8" Duration=".5" relative="false" />
37 </Sequence>
38 </OnClick>
39 </Animations>
40 </cc1:AnimationExtender>
41 <asp:Panel ID="PanelLeft" runat="server" Height="600px" Width="130px" BackColor="#BFDBFF" CssClass="leftpanel">
42 <table border="0" style=" padding:0px 0px 0px 0px;" >
43 <tr>
44 <td valign="top" style="text-align:center;" width="120px">
45 <asp:Button ID="btn_save" runat="server" Text="儲存" CssClass="menuButton" onMouseOver="goLite(this.form.name,this.name)"
46 onMouseOut="goDim(this.form.name,this.name)" /><br/><br />
47 <asp:Button ID="btn_home" runat="server" Text="回首頁" CssClass="menuButton" onMouseOver="goLite(this.form.name,this.name)" onMouseOut="goDim(this.form.name,this.name)" />
48 </td>
49 <td style="width: 10px; height:590px; background-color:Green; color:White; " valign="middle" id="IMG1" runat="server" >
50 <span
51 style="font-size: 10pt">
52 <br/>＊
53 <br/>點
54 <br/>選
55 <br/>關
56 <br/>閉
57 <br/>＊
58 <br/>功
59 <br/>能
60 <br/>列
61 </span></td>
62 </tr>
63 </table>
64 </asp:Panel>
65 </div></form></body></html>
預設關閉狀態
滑鼠移到綠色bar上自動展開
若在綠色bar上click mouse 左鍵則關閉