AJAX ControlToolkit學習日誌-RoundedCornersExtender(24)

      RoundedCornersExtender控制項用於對面板進行設定，包括圓角、半徑、邊框顏色等等。

下面看一個樣本：

1)在VS2005中建立一個ASP.NET AJAX-Enabled Web Project項目工程，命名為RoundedCornersExtender1。

2)在Default.aspx中拖放一個Panel控制項，命名為Panel1。同時再拖放一個RoundedCornersExtender控制項，並將它與Panel1關聯。同時設定它的一些屬性。

代碼如下：

11<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
22fdfggsgdggdgdgg</asp:Panel>
33<br />
44<br />
55<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" BehaviorID="RoundedCornersBehavior1" Radius="6" runat="server" BorderColor="Khaki" Corners="All"
66TargetControlID="Panel1">
77</cc1:RoundedCornersExtender>

屬性說明：

　　BehaviorID：該控制項在用戶端的標識。

　　Radius：該控制項指定目標控制項的半徑。

　　BorderColor：該控制項指定目標控制項的邊框顏色。

　　Corners：指定目標控制項哪幾個角是圓角。

　   TargetControlID：指定該控制項的目標控制項。

3)完成了準系統後，再添加一些輔助調整Panel的功能。在頁面上添加5個Radio，用於調整Panel的半徑。

代碼如下：

11Radius：<br />
22<input id="Radio1" type="radio" value="0" name="RadiusValue" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);"/>None&nbsp;
33<input id="Radio2" type="radio" value="2" name="RadiusValue" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />2&nbsp;
44<input id="Radio3" type="radio" value="4" name="RadiusValue" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />4&nbsp;
55<input id="Radio4" type="radio" value="6" name="RadiusValue" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />6&nbsp;
66<input id="Radio5" type="radio" value="8" name="RadiusValue" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />8&nbsp;
77<input id="Radio6" type="radio" value="10" name="RadiusValue" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />10<br />
88<br /> 

4)然後再添加4個CheckBox，用於調整Panel的哪幾個角需要設定圓角。

代碼如下：

11Corners：<br />
22<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;
33&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
44<input id="Checkbox2" checked="checked" value="2" name="CornersValue" type="checkbox" onclick="$find('RoundedCornersBehavior1').setCorner(this.value,this.checked);" />Top Right<br />
55<input id="Checkbox3" checked="checked" name="CornersValue" type="checkbox" value="8" onclick="$find('RoundedCornersBehavior1').setCorner(this.value,this.checked);" />Bottom
66Left &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
77<input id="Checkbox4" checked="checked" name="CornersValue" type="checkbox" value="4" onclick="$find('RoundedCornersBehavior1').setCorner(this.value,this.checked);" />Bottom Right<br />
88<br /> 

 5)最後在頁面上添加4個Radio，用於控制Panel的顏色。

代碼如下：

11Border Color：<br />
22<input id="Radio7" type="radio" name="colorValues" value="" onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />None&nbsp;
33<input id="Radio8" type="radio" name="colorValues" value="Black" onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />Black&nbsp;
44<input id="Radio9" type="radio" name="colorValues" value="Red" onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />Red&nbsp;
55<input id="Radio10" type="radio" name="colorValues" value="Aqua" onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />Aqua 

6)完成這些步驟後，按下CTRL+F5,在瀏覽器裡查看效果。