功能:
专门用来锐化控件的边角。RoundedCorners控件和DropShadow控件的锐化效果一样,缺点是没有阴影效果,优点是可以只锐化4个边角中的任意一个或多个。
属性:
TargetControlID:被锐化的控件ID。
Radius:锐化幅度。
Corners:要锐化的边角,All表示所有边角。
代码实例:
专门用来锐化控件的边角。RoundedCorners控件和DropShadow控件的锐化效果一样,缺点是没有阴影效果,优点是可以只锐化4个边角中的任意一个或多个。
属性:
TargetControlID:被锐化的控件ID。
Radius:锐化幅度。
Corners:要锐化的边角,All表示所有边角。
代码实例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>RoundedCorners 控件</title>
<style type="text/css">
.roundedPanel
{
width:300px;
background-color:#B347A9;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server" CssClass="roundedPanel">
<div style="padding:10px;text-align:center">
<div style="padding:5px; border:solid black thin;background-color:#B4B4B4;">
<asp:Image ID="Image1" ImageUrl="~/Images/AJAX.gif" runat="server" />
</div>
</div>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" BehaviorID="RoundedCornersBehavior1" TargetControlID="Panel1" Color="#ff8800" >
</ajaxToolkit:RoundedCornersExtender>
<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);" />
<br />
选择某个边角
<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>
<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>
</form>
</body>
</html>
运行结果:<head runat="server">
<title>RoundedCorners 控件</title>
<style type="text/css">
.roundedPanel
{
width:300px;
background-color:#B347A9;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server" CssClass="roundedPanel">
<div style="padding:10px;text-align:center">
<div style="padding:5px; border:solid black thin;background-color:#B4B4B4;">
<asp:Image ID="Image1" ImageUrl="~/Images/AJAX.gif" runat="server" />
</div>
</div>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" BehaviorID="RoundedCornersBehavior1" TargetControlID="Panel1" Color="#ff8800" >
</ajaxToolkit:RoundedCornersExtender>
<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);" />
<br />
选择某个边角
<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>
<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>
</form>
</body>
</html>