21.4 ToggleButton个性化按钮控件(征服ASP.NET 2.0 Ajax——Web开发技术详解 )

最新推荐文章于 2023-10-28 21:40:30 发布

原创最新推荐文章于 2023-10-28 21:40:30 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #ajax #web开发 #server #服务器

本文介绍了ASP.NET AJAX中的ToggleButton控件，它用于为CheckBox提供自定义图片展示选中和未选中状态。文章详细讲解了ToggleButton的主要属性，并通过实例展示了如何在项目中使用该控件，包括普通应用、CheckBox不可用状态下的应用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---------http://book.youkuaiyun.com/bookfiles/305/10030512733.shtml

21.4 ToggleButton个性化按钮控件

ToggleButton是一个专用于CheckBox的按钮控件，本节介绍其主要属性，并以实例的形式，显示如何在项目中应用此控件。

21.4.1 简介

ToggleButton控件只能应用于控件CheckBox，其最主要的功能，是以自定义图片的形式，显示复选框的选中和未选状态，确切的说是一个根据状态变化的图片按钮。ToggleButton控件的主要属性如下：

<ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"

TargetControlID="CheckBox1"

ImageWidth="19"

ImageHeight="19"

CheckedImageAlternateText="Check"

UncheckedImageAlternateText="UnCheck"

UncheckedImageUrl="ToggleButton_Unchecked.gif"

DisabledCheckedImageUrl=””

CheckedImageUrl="ToggleButton_Checked.gif" />

其中各属性的意义如下：

l TargetControlID：要应用ToggleButton特色的CheckBox控件的ID。

l ImageWidth：显示图片的宽度。

l ImageHeight：显示图片的高度。

l CheckedImageAlternateText：选中状态下的提示文本。

l UncheckedImageAlternateText：未选中状态下的提示文本。

l UncheckedImageUrl：未选中状态下显示的图片地址。

l CheckedImageUrl：选中状态下显示的图片地址。

l DisabledCheckedImageUrl：当控件为不可用状态时，默认选中时要显示的图片。

ToggleButton控件的应用效果如图21-25所示。

图21-25 ToggleButton控件的应用效果

注意：此控件不能应用于CheckBoxList控件。

21.4.2 用ToggleButton装饰CheckBox控件实例

ToggleButton专门用来装饰CheckBox，并不支持其他控件，复选框可以是客户端的，也可以是服务器端的。本例使用ToggleButton来装饰一组服务器端的CheckBox，其中每个得定义又不相同，有CheckBox在不可用状态下的ToggleButton应用，也有CheckBox默认就被选中时ToggleButton的应用。实例的演示步骤如下：

（1）打开VS2005，新建一个AJAX Control Toolkit网站，命名为“AjaxToggleButtonCtrl”。

（2）打开默认生成的Default.aspx页，切换到窗体的设计视图。

（3）在视图中添加6个CheckBox控件和5个ToggleButtonExtender。其中有一个CheckBox并不做任何修饰，体现对比效果。

（4）设计页面的布局，最终效果如图21-26所示。

图21-26 ToggleButton实例的设计视图

（5）将“ToggleButtonExtender1”应用于“CheckBox1”，设计最普通的应用，需要提供两个图片，一个用于显示未选中状态的“wrong.jpg”，一个用于显示选中状态的“right.jpg”。ToggleButtonExtender1最终的设计属性如清单21-17所示。

代码清单21-17 ToggleButtonExtender1的设计属性

<ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"

TargetControlID="CheckBox1"

ImageHeight="20"

ImageWidth="23"

CheckedImageAlternateText="选中"

UncheckedImageAlternateText="未选中"

CheckedImageUrl="right.jpg"

UncheckedImageUrl="wrong.JPG">

</ajaxToolkit:ToggleButtonExtender>

（6）将“ToggleButtonExtender5”应用于“CheckBox5”，此复选框的属性“Enabled”要设置为“false”，表示其处于不可用状态，这时就需要定义ToggleButtonExtender5的“DisabledCheckedImageUrl”属性。最终ToggleButtonExtender5的设计属性，如清单21-18所示。

代码清单21-18 ToggleButtonExtender5的设计属性

<ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender5" runat="server"

TargetControlID="CheckBox5"

ImageHeight="20"

ImageWidth="23"

DisabledCheckedImageUrl="wrong.JPG"

DisabledUncheckedImageUrl="right.jpg"

CheckedImageAlternateText="选中"

UncheckedImageAlternateText="未选中"

UncheckedImageUrl="right.jpg"

CheckedImageUrl="wrong.JPG">

</ajaxToolkit:ToggleButtonExtender>