本文主要是介绍21.3 RoundedCorners锐化边角控件 (征服ASP.NET 2.0 Ajax——Web开发技术详解),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
--------http://book.csdn.net/bookfiles/305/10030512732.shtml
21.3 RoundedCorners锐化边角控件
RoundedCorners控件专门用来锐化控件的边角,本节介绍其主要的属性和功能。
21.3.1 简介
RoundedCorners控件和DropShadow控件的锐化效果一样,缺点是没有阴影效果,优点是可以只锐化4个边角中的任意一个或多个。RoundedCorners控件的主要属性如下所示:
<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"
TargetControlID="Panel1"
Radius="6"
Corners="All" />
其中各属性的意义如下:
l TargetControlID:被锐化的控件ID。
l Radius:锐化幅度。
l Corners:要锐化的边角,All表示所有边角。
RoundedCorners控件的应用效果如图21-22所示。
图21-22 RoundedCorners控件的应用效果
21.3.2 自定义锐化效果
本例的功能是可以自定义边角锐化的幅度,也可以选择要锐化的边角。演示步骤如下:
(1)打开VS2005,新建一个AJAX Control Toolkit网站,命名为“AjaxRoundedCornersCtrl”。
(2)打开默认生成的Default.aspx,切换到设计视图。
(3)添加一个Panel,用来实现锐化效果,再添加一个RoundedCorners,用来控制锐化。然后添加2个Html Radio和4个Html CheckBox。效果如图21-23所示。
图21-23 RoundedCorners控件实例的设计视图
(4)2个Radio让用户选择其锐化的幅度,4个CheckBox让用户选择锐化的边角,这6个控件的事件定义如清单21-16所示。注意“$find”方法的使用,是AJAX类库中提供查找客户端AJAX控件专用的方法。
代码清单21-16 自定义RoundedCorners的效果事件
<input id="Radio1" type="radio" value="8"
οnclick="$find('RoundedCornersBehavior1').set_Radius(this.value);"/>8
<input id="Radio2" type="radio" value="10"
οnclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />10
选择某个边角
<input id="Checkbox1" type="checkbox" value="1"
οnclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />左上角
<input id="Checkbox2" type="checkbox" value="2"
οnclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />右上角
<input id="Checkbox3" type="checkbox" value="8"
οnclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />左下角
<input id="Checkbox4" type="checkbox" value="4"
οnclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />右下角
(5)设计RoundedCorners的属性如下所示。
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
BehaviorID="RoundedCornersBehavior1"
TargetControlID="Panel1">
</ajaxToolkit:RoundedCornersExtender>
(6)按“Ctrl+S”保存所有的设计。按F5运行程序,效果如图21-24所示。可通过选择不同的锐化幅度测试不同的运行效果。
图21-24 RoundedCorners自定义的运行效果
这篇关于21.3 RoundedCorners锐化边角控件 (征服ASP.NET 2.0 Ajax——Web开发技术详解)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!