AJAX ControlToolkit学习日志-RoundedCornersExtender(24)

      RoundedCornersExtender控件用于对面板进行设置，包括圆角、半径、边框颜色等等。

下面看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为RoundedCornersExtender1。

2)在Default.aspx中拖放一个Panel控件，命名为Panel1。同时再拖放一个RoundedCornersExtender控件，并将它与Panel1关联。同时设置它的一些属性。

代码如下：

1 1 < asp:Panel  ID ="Panel1"  runat ="server"  Height ="50px"  Width ="125px" >
2 2fdfggsgdggdgdgg </ asp:Panel >
3 3 < br  />
4 4 < br  />
5 5 < cc1:RoundedCornersExtender  ID ="RoundedCornersExtender1"  BehaviorID ="RoundedCornersBehavior1"  Radius ="6"  runat ="server"  BorderColor ="Khaki"  Corners ="All"
6 6TargetControlID ="Panel1" >
7 7 </ cc1:RoundedCornersExtender >

属性说明：

　　BehaviorID：该控件在客户端的标识。

　　Radius：该控件指定目标控件的半径。

　　BorderColor：该控件指定目标控件的边框颜色。

　　Corners：指定目标控件哪几个角是圆角。

　   TargetControlID：指定该控件的目标控件。

3)完成了基本功能后，再添加一些辅助调整Panel的功能。在页面上添加5个Radio，用于调整Panel的半径。

代码如下：

1 1Radius： < br  />
2 2 < input  id ="Radio1"  type ="radio"  value ="0"  name ="RadiusValue"  onclick ="$find('RoundedCornersBehavior1').set_Radius(this.value);" /> None &nbsp;
3 3 < input  id ="Radio2"  type ="radio"  value ="2"  name ="RadiusValue"  onclick ="$find('RoundedCornersBehavior1').set_Radius(this.value);"   /> 2 &nbsp;
4 4 < input  id ="Radio3"  type ="radio"  value ="4"  name ="RadiusValue"  onclick ="$find('RoundedCornersBehavior1').set_Radius(this.value);"   /> 4 &nbsp;
5 5 < input  id ="Radio4"  type ="radio"  value ="6"  name ="RadiusValue"  onclick ="$find('RoundedCornersBehavior1').set_Radius(this.value);"   /> 6 &nbsp;
6 6 < input  id ="Radio5"  type ="radio"  value ="8"  name ="RadiusValue"  onclick ="$find('RoundedCornersBehavior1').set_Radius(this.value);"   /> 8 &nbsp;
7 7 < input  id ="Radio6"  type ="radio"  value ="10"  name ="RadiusValue"  onclick ="$find('RoundedCornersBehavior1').set_Radius(this.value);"   /> 10 < br  />
8 8 < br  />  

4)然后再添加4个CheckBox，用于调整Panel的哪几个角需要设置圆角。

代码如下：

1 1Corners： < br  />
2 2 < input  id ="Checkbox1"  type ="checkbox"  value ="1"  name ="CornersValue"  checked ="checked"  onclick ="$find('RoundedCornersBehavior1').setCorner(this.value,this.checked);"   /> Top Left  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
3 3 &nbsp;   &nbsp;&nbsp;   &nbsp;   &nbsp;   &nbsp;
4 4 < input  id ="Checkbox2"  checked ="checked"  value ="2"  name ="CornersValue"  type ="checkbox"  onclick ="$find('RoundedCornersBehavior1').setCorner(this.value,this.checked);"   /> Top Right < br  />
5 5 < input  id ="Checkbox3"  checked ="checked"  name ="CornersValue"  type ="checkbox"  value ="8"  onclick ="$find('RoundedCornersBehavior1').setCorner(this.value,this.checked);"   /> Bottom
6 6Left  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
7 7 < input  id ="Checkbox4"  checked ="checked"  name ="CornersValue"  type ="checkbox"  value ="4"  onclick ="$find('RoundedCornersBehavior1').setCorner(this.value,this.checked);"   /> Bottom Right < br  />
8 8 < br  />  

 5)最后在页面上添加4个Radio，用于控制Panel的颜色。

代码如下：

1 1Border Color： < br  />
2 2 < input  id ="Radio7"  type ="radio"  name ="colorValues"  value =""  onclick ="$find('RoundedCornersBehavior1').set_BorderColor(this.value);"   /> None &nbsp;
3 3 < input  id ="Radio8"  type ="radio"  name ="colorValues"  value ="Black"  onclick ="$find('RoundedCornersBehavior1').set_BorderColor(this.value);"   /> Black &nbsp;
4 4 < input  id ="Radio9"  type ="radio"  name ="colorValues"  value ="Red"  onclick ="$find('RoundedCornersBehavior1').set_BorderColor(this.value);"   /> Red &nbsp;
5 5 < input  id ="Radio10"  type ="radio"  name ="colorValues"  value ="Aqua"  onclick ="$find('RoundedCornersBehavior1').set_BorderColor(this.value);"   /> Aqua 

6)完成这些步骤后，按下CTRL+F5,在浏览器里查看效果。

转载于:https://www.cnblogs.com/qc1984326/archive/2007/03/22/683949.html