AJAX ControlToolkit學習日誌-DropShadowExtender(10)

      該控制項用於對一個面板實現Shadow的效果。對其的屬性進行不同值的設定，可以實現不同的效果。

下面來看一個樣本：

1)在VS中建立一個ASP.NET AJAX-Enabled Web Project項目工程，命名為DropShadowExtender1。

2)在Default.aspx中拖放一個Panel控制項，在其裡面拖放兩個Label和兩個TextBox。把Label的Text屬性設定為Name和Password。

代碼如下：1            &nbsp;<asp:Label ID="Label1" runat="server" ForeColor="White" Text="Name"></asp:Label>
2            &nbsp; &nbsp; &nbsp;
3            <asp:TextBox ID="TextBox2" runat="server" Width="89px"></asp:TextBox>
4            &nbsp; &nbsp;&nbsp;<br />
5            &nbsp;<asp:Label ID="Label2" runat="server" ForeColor="White" Text="Password"></asp:Label>
6            <asp:TextBox ID="TextBox1" runat="server" Width="91px"></asp:TextBox></div>    
7            </asp:Panel>

3)然後再在頁面上拖放一個DropShadowExtender控制項，設定其一些屬性。

代碼如下：1        <cc1:dropshadowextender id="DropShadowExtender1" BehaviorID="DropShadowBehavior1" TargetControlID="Panel1" Opacity="0.5" Rounded="true"
2         Radius="6" runat="server"></cc1:dropshadowextender>

屬性說明：
      BehaviorID：為該控制項在用戶端行為表現的標識號。
      TargetControlID：該控制項綁定的要實現Shadow效果的控制項。
      Opacity：實現Shadow效果的控制項的透明度。
      Rounded：實現Shadow效果的控制項是否有圓角。
      Radius：實現Shadow效果的控制項的半徑。

4)同時在頁面上拖放一些用於控制效果的控制項。

代碼如下：

 1        &nbsp;<asp:Label ID="Label3" runat="server" Text="Show Drop Shadow"></asp:Label>:<input type="checkbox" checked="checked" id="chkShadow" onclick="var b = $find('DropShadowBehavior1'); b.set_Width(chkShadow.checked ?  5 : 0);"/>   
 2        <br />
 3        Rounded:<input type="checkbox" checked="checked" id="chkRounded" onclick="var b=$find('DropShadowBehavior1');b.set_Rounded(chkRounded.checked);" /> 
 4        <br />
 5        Radius:<input type="radio" id="radio2" name="radiusName" value="2" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
 6        2
 7        <input type="radio" id="raido4" value="4" name="radiusName" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
 8        4
 9        <input type="radio" id="Radio6" value="6" name="radiusName" checked="true" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
10        6
11        <input type="radio" id="Radio8" value="8" name="radiusName" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
12        8 &nbsp;<input type="radio" id="Radio10" value="10" name="radiusName" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
13        10
14        <br />
15        Opacity:
16        <input type="radio" name="OpacityName" id="radio0" value="0" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
17        0%
18        <input type="radio" name="OpacityName" id="radio2" value="0.25" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
19        25%
20        <input type="radio" name="OpacityName" id="radio5" value="0.5" checked="checked" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
21        50%
22        <input type="radio" name="OpacityName" id="radio7" value="0.75" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
23        75%
24        <input type="radio" name="OpacityName" id="radio" value="1" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
25        100%

最終視圖如下：

5)按下CTRL+F5，在瀏覽器裡查看效果。

如下：