AJAX Toolkits -- DropShadow

在AJAX Toolkits中有个DropShadow扩展控件，该控件的对象Panel（我只在Panel上试验成功，虽然说明手册上说，可以用于Button和Link）

通过该扩展控件，可以实现目标控件边缘变为原型，并增加阴影效果

• TargetControlID - 控件的编号
• Width - 数字型，阴影的相对宽度，默认为5
• Opacity - 数字型，透明度，范围是0~1.0，默认为0.5 
• TrackPosition - 布尔型，当Panel存在位置移动（例如拖动或折叠），将该属性设置为True，则会根据实际位置而保持阴影效果，默认为false.
• Rounded - 布尔型，边角是否为原型。

 

 1<div style="width: 300px">
 2        <asp:Panel ID="Panel1" runat="server" Style="background-color: #AAFFFF">
 3            <div style="padding: 10px">
 4                First Name:
 5                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 6                <br />
 7                Last Name:
 8                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
 9                <hr />
                <asp:Panel ID="CollapseHeader" runat="server" Style="cursor: pointer; text-align: left">
                    <asp:Label ID="Label1" runat="server" Text="Label">Show Details</asp:Label>
                </asp:Panel>
                <asp:Panel ID="Panel2" runat="server" Style="overflow: hidden; height: 0px; text-align: left">
                    Not many details here. This is just a demo to show how the DropShadow will react
                    properly to changes in the size of the panel it is attached to.</asp:Panel>
                <cc1:CollapsiblePanelExtender ID="Panel2_CollapsiblePanelExtender" runat="server"
                    Enabled="True" TargetControlID="Panel2" Collapsed="true" CollapsedText="Show Details"
                    ExpandedText="Hide Details" CollapseControlID="CollapseHeader" ExpandControlID="CollapseHeader"
                    SuppressPostBack="true">
                </cc1:CollapsiblePanelExtender>
            </div>
        </asp:Panel>
        <cc1:DropShadowExtender ID="Panel1_DropShadowExtender" runat="server" Enabled="True"
            TargetControlID="Panel1" Opacity="0.2" Rounded="true" TrackPosition="true">
        </cc1:DropShadowExtender>
    </div>