Home / AJAX

HOW TO Use the DropShadow Control

RSS
Modified on 2010/01/17 17:53 by Mike Pope Categorized as Uncategorized

DropShadow Demonstration

fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter
fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter
fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter
fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter
fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter
fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter








DropShadow Description

DropShadow is an extender that applies a drop shadow to an ASP.NET Panel control. The extender allows you to specify how wide the shadow is, how opaque it is, and whether the shadow should have rounded corners. For pages that let the user move or resize the panel, the DropShadow extender has a mode that will resize and reposition the shadow to match the target panel at run time.

Video - How Do I: Use the ASP.NET AJAX DropShadow Control?

DropShadow Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .shadow { background-color: Gray } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require([Sys.components.dropShadow, Sys.components.draggable], function() { $("#shadow").dropShadow({ Opacity: 0.8, TrackPosition: true, Width: 10, Rounded: true }); Sys.create.draggable("#shadow", { handle: Sys.get("#shadow") }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <span id="shadow" class="shadow"> fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter <br /> fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter <br /> fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter <br /> fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter <br /> fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter <br /> fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter fillter <br /> </span> </div> </form> </body> </html>

DropShadow Client Reference

Sys.Extended.UI.DropShadowBehavior Class

  • Summary - Attaches a drop shadow to the specified element.
  • Parameters - Sys.UI.DomElement element

Methods

  • initialize() - Initializes the DropShadow behavior.
  • dipose() - Disposes the DropShadow behavior.
  • buildShadowDiv() - Creates the div element that is used as the shadow.
  • disposeShadowDiv() - Disposes the div element that is used as the shadow.
  • onTimerTick() - Represents the Timer control tick handler that is used to position the shadow when its target moves.
  • startTimer() - Starts the timer.
    • Remarks - Note: This method also starts tracking the bounds of the target element.
  • stopTimer() - Stops the timer.
    • Remarks - Note: This method also stops tracking the bounds of the target element.
  • setShadow() - Positions and sizes the shadow.
    • Parameters - Boolean force, Boolean norecurse
  • setupOpacity() - Sets the opacity of the shadow div element.
  • setupRounded() - Creates and initializes the RoundedCorners behavior for the drop shadow.
  • updateZIndex() - Updates the z-index of the shadow div element so that the shadow remains behind the target element.
  • updateRoundedCorners() - Updates the RoundedCorners behavior and recreates the shadow div element so that its corners are rounded as well.

Properties

  • Opacity - Gets or sets a number that represents the opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default is .5.
  • Rounded - Gets or sets a Boolean value that specifies whether the corners of the target and drop shadow should be rounded.
  • Radius - Gets or sets an integer that specifies the radius, in pixels, of the rounded corners.
  • Width - Gets or sets an integer that specifies the width, in pixels, of the drop shadow. The default is 5.
  • TrackPositionDelay - Gets or sets a number that specifies the length of the timer interval that is used when tracking the position of the target.
  • TrackPosition - Gets or sets a Boolean value that specifies whether the drop shadow should track the position of the panel it is attached to.
    • Remarks - Note: Set this property to true if the panel is absolutely positioned or if it might move at run time. The default is false.

DropShadow Server Code Sample

        <asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel">
            <div style="padding:10px">  
                First Name: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                Last Name: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                <hr />
           
                <asp:Panel ID="CollapseHeader" runat="server" style="cursor: pointer;">
                    <asp:Label ID="Label1" runat="server" Text="Label">Show Details...</asp:Label>
                </asp:Panel>
                <asp:Panel ID="Panel2" runat="server" style="overflow:hidden;height:0"> 
                    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>
                <ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="Server"
                    TargetControlID="Panel2"
                    Collapsed="true"
                    CollapsedText="Show Details..."
                    ExpandedText="Hide Details"
                    TextLabelID="Label1"
                    ExpandControlID="CollapseHeader"
                    CollapseControlID="CollapseHeader"
                    SuppressPostBack="true" />
            </div>
        </asp:Panel>

<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" BehaviorID="DropShadowBehavior1" TargetControlID="Panel1" Width="5" Rounded="true" Radius="6" Opacity=".75" TrackPosition="true" />

<div style="padding:15px;"> <label for="chkShadow">Show Drop Shadow: </label> <input type="checkbox" checked="checked" id="chkShadow" onclick="var b = $find('DropShadowBehavior1'); b.set_Width(chkShadow.checked ? 5 : 0);"/><br /> <label for="chkRounded">Rounded: </label> <input type="checkbox" id="chkRounded" checked="checked" onclick="var b = $find('DropShadowBehavior1'); b.set_Rounded(chkRounded.checked);"/> <div> Radius: <input type="radio" id="radius2" name="radiusValues" value="2" onclick="$find('DropShadowBehavior1').set_Radius(this.value);" /> <label for="radius2">2</label> <input type="radio" id="radius4" name="radiusValues" value="4" onclick="$find('DropShadowBehavior1').set_Radius(this.value);" /> <label for="radius4">4</label> <input type="radio" id="radius6" name="radiusValues" value="6" onclick="$find('DropShadowBehavior1').set_Radius(this.value);" checked="checked" /> <label for="radius6">6</label> <input type="radio" id="radius10" name="radiusValues" value="10" onclick="$find('DropShadowBehavior1').set_Radius(this.value);"/> <label for="radius10">10</label> </div> <div> Opacity: <input type="radio" id="opacity25" name="opacityValues" value=".25" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" /> <label for="opacity25">25%</label> <input type="radio" id="opacity50" name="opacityValues" value=".5" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" /> <label for="opacity50">50%</label> <input type="radio" id="opacity75" name="opacityValues" value=".75" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" checked="checked" /> <label for="opacity75">75%</label> <input type="radio" id="opacity100" name="opacityValues" value="1.0" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);"/> <label for="opacity100">100%</label> </div> </div>


DropShadow Server Reference

The properties in italics are optional.

The control in the preceding example is initialized using the following 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 control to extend.
  • Width - The width, in pixels, of the drop shadow. The default is 5.
  • Opacity - The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default is .5.
  • TrackPosition - A Boolean value that specifies whether the dropshadow should track the position of the panel it is attached to. Set this property to true if the panel is absolutely positioned or if it might move at run time. The default is false.
  • Rounded - A Boolean value that specifies whether the corners of the target and drop shadow should be rounded.



DropShadow Additional Code Samples