Home / AJAX

HOW TO Use the RoundedCorners Control

RSS
Modified on 2010/01/18 05:59 by Mike Pope Categorized as Uncategorized

RoundedCorners 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

RoundedCorners Description

The RoundedCorners extender applies rounded corners to existing elements. To accomplish this, it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose which corners of the target panel should be rounded by setting the Corners property.

NO VIDEO AVAILABLE



RoundedCorners 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"> .rounded { background-color: Gray; width: 300px; } </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.require(Sys.components.rounded, function() { $("#rounded").rounded({ Radius: 10 }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div> <div id="rounded" class="rounded"> 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 /> </div> </div> </div> </form> </body> </html>

RoundedCorners Client Reference

Sys.Extended.UI.RoundedCornersBehavior Class

  • Summary - Rounds the corners of its target element.
  • Parameters - Sys.UI.DomElement element

Methods

  • initialize() - Initializes the RoundedCorners behavior.
  • dipose() - Disposes the RoundedCorners behavior.
  • update() - Creates the surrounding div element that has rounded corners.
  • disposeParentDiv() - Disposes the surrounding div element that has rounded corners.
  • getBackgroundColor() - Gets the background color of the target element.
  • moveChildren() - Moves the child nodes from one element to another.
    • Parameters - Sys.UI.DomElement src, Sys.UI.DomElement dest
  • isCornerSet(corner) - Checks whether the specified corner has been set.
    • Parameters - AjaxControlTooolkit.BoxCorners corner
    • Returns - true if the corner has been set; otherwise, false.
  • setCorner(corner, value) - Sets a corner that should be rounded.
    • Parameters - Sys.Extended.UI.BoxCorners corner, Boolean value
    • Remarks - Set the value parameter to true to set the corner as rounded. Set the value parameter to false to clear the rounded corner setting.

Properties

  • Color - Gets or sets a string that contains the background color of the rounded corner areas. By default, this property gets the background color of the panel that it is attached to.
  • Radius - Gets or sets an integer value that specifies the radius of the corners (and the height of the added area). The default is 5.
  • Corners - Gets or sets a Sys.Extended.UI.BoxCorners object that specifies which corners should be rounded.
  • BorderColor - Gets or sets a string that contains the color of the border and therefore of the rounded corners.

Sys.Extended.UI.BoxCorners Enum

  • Summary - Defines the corners of an element to apply rounding to.

Fields

  • None : 0x00
  • TopLeft : 0x01
  • TopRight : 0x02
  • BottomRight : 0x04
  • BottomLeft : 0x08
  • Top : 0x01 | 0x02
  • Right : 0x02 | 0x04
  • Bottom : 0x04 | 0x08
  • Left : 0x08 | 0x01
  • All : 0x01 | 0x02 | 0x04 | 0x08

RoundedCorners Server Code Sample

        <asp:Panel ID="Panel1" runat="server" Width="330px" CssClass="roundedPanel">
            <div style="padding: 10px; text-align: center">
                <div style="padding: 5px; border: solid black thin; background-color: #B4B4B4;">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" /><br />
                    ASP.NET AJAX
                </div>
            </div>
        </asp:Panel>
        
        <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
            BehaviorID="RoundedCornersBehavior1"
            TargetControlID="Panel1"
            Radius="6"
            Corners="All" />
        
        <div style="padding-top: 3px;">CornerRadius:</div>
        <div style="padding: 10px;">
            <input type="radio" id="radius0" name="radiusValues" value="0"
                onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
            <label for="radius0">None</label>
            
            <input type="radio" id="radius2" name="radiusValues" value="2"
                onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
            <label for="radius2">2px</label>
            
            <input type="radio" id="radius4" name="radiusValues" value="4"
                onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
            <label for="radius4">4px</label>
            
            <input type="radio" id="radius6" name="radiusValues" value="6"
                onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" checked="checked" />
            <label for="radius6">6px</label>
            
            <input type="radio" id="radius10" name="radiusValues" value="10"
                onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
            <label for="radius10">10px</label>
        </div>
        
        <div style="padding-top: 3px;">Corners:</div>
        <div style="padding: 10px;">
            <input type="checkbox" id="corner1" name="cornerValues" value="1"
                onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
            <label for="corner1">Top Left</label>
            
            <input type="checkbox" id="corner2" name="cornerValues" value="2"
                onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
            <label for="corner2">Top Right</label><br />
            
            <input type="checkbox" id="corner8" name="cornerValues" value="8"
                onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
            <label for="corner8" >Bottom Left</label>
            
            <input type="checkbox" id="corner4" name="cornerValues" value="4"
                onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
            <label for="corner4">Bottom Right</label>
        </div>
        
        <div style="padding-top: 3px;">Border Color:</div>
        <div style="padding: 10px;">
            <input type="radio" id="color0" name="colorValues" value=""
                onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" checked="checked" />
            <label for="color0">None</label>
            
            <input type="radio" id="color1" name="colorValues" value="Black"
                onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
            <label for="color1">Black</label>
            
            <input type="radio" id="color2" name="colorValues" value="Red"
                onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
            <label for="color2">Red</label>
            
            <input type="radio" id="color3" name="colorValues" value="Aqua"
                onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
            <label for="color3">Aqua</label>
        </div>

RoundedCorners Server Reference

The properties in italics are optional.

<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"
    TargetControlID="Panel1"
    Radius="6"
    Corners="All" />
  • TargetControlID - The ID of the control to extend.
  • Radius - The radius of the corners (and height of the added area). The default is 5.
  • Corners - The corners of the target panel that should be rounded (None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All)



RoundedCorners Additional Code Samples