thousand dollars: AJAX -DropShadowExtender Control

DropShadow is an extender which applies a "Drop Shadow" to a Panel. It allows you to specify how wide the shadow is as well as how opaque it is, or if you would like rounded corners. For pages that allow the user to move or resize the panel, the DropShadow has a mode that will resize/reposition it to match that of the target panel at run time.

DropShadow Properties

The control above is initialized with this code. The properties in italic are optional.

<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
    TargetControlID="Panel1" 
    Opacity=".8" 
    Rounded="true"
    TrackPosition="true" />

TargetControlID - The ID of the button or link for this extender to operate on
Width - The width, in pixels of the drop shadow. Default value is 5.
Opacity - The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default value is .5.
TrackPosition - Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move.
Rounded - Set to true to set rounded corners on the target and the shadow. Default is false.

Code In XML View

----------------------------------------

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Ajax DropShadowExtender - How to use DropShadowExtender in asp.net ajax</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:Crimson; font-style:italic;">Ajax Control Toolkit Example: Using DropShadowExtender</h2>
<hr width="600" align="left" color="Pink" />
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
</asp:ScriptManager>
<cc1:DropShadowExtender
ID="DropShadowExtender1"
runat="server"
TargetControlID="Panel1"
>
</cc1:DropShadowExtender>
<br /><br />
<asp:Panel
ID="Panel1"
runat="server"
BackColor="Gray"
ForeColor="Snow"
Width="300"
Height="150"
HorizontalAlign="Center"
>
<br />
<asp:TextBox
ID="TextBox1"
runat="server"
BackColor="Snow"
ForeColor="OrangeRed"
Text="email"
>
</asp:TextBox>
<br /><br />
<asp:Button
ID="Button1"
runat="server"
Font-Bold="true"
ForeColor="SlateBlue"
Height="40"
Text="Subscribe Our Newsletter"
/>
</asp:Panel>
</div>
</form>
</body>
</html>

Pages

Friday 3 February 2012

AJAX -DropShadowExtender Control

No comments: