ToggleButton:用图片来代替CheckBox

最新推荐文章于 2020-03-12 15:59:52 发布

Kalen_Chen

最新推荐文章于 2020-03-12 15:59:52 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX ASP.NET系列文章标签： server asp stylesheet vb.net object url

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/Kalen_Chen/article/details/1648287

AJAX ASP.NET系列专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用ToggleButtonExtender控件将CheckBox替换为图片，实现更丰富的视觉效果。示例展示了不同状态下（启用/禁用、选中/未选中）CheckBox对应的图片配置。

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

ToggleButton扩展器控件可以将CheckBox用一对图片替代，用更加丰富的视觉效果来表示CheckBox的选中/未选中状态。
示例运行效果：

图(1)

图(2)

图(3)

StyleSheet.css代码示例

*

{

font-family: Tahoma;

font-size: 12px;

}

fieldset

{

margin: 5px;

padding: 5px;

}

.demoheading

{

padding-bottom:20px;

color:#5377A9;

font-family:Arial,Sans-Serif;

font-weight:bold;

font-size:1.5em;

}

ToggleButtonDemo.aspx代码示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ToggleButtonDemo.aspx.cs" Inherits="Chapter08_ToggleButtonDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>ToggleButton Demo</title>

<link href="StyleSheet.css" rel="Stylesheet" type="text/css" />

</head>

<body>

<form id="ToggleButtonForm" runat="server">

<asp:ScriptManager ID="sm" runat="server" />

<div class="demoheading">用图片来代替CheckBox</div>

<asp:UpdatePanel ID="up" runat="server">

<ContentTemplate>

<asp:CheckBox ID="CheckBox1" Checked="true" Text="ASP.NET" runat="server" /><br />

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

TargetControlID="CheckBox1"

CheckedImageUrl="Images/checked.png"

UncheckedImageUrl="Images/unchecked.png"

ImageHeight="16"

ImageWidth="16"

CheckedImageAlternateText="取消"

UncheckedImageAlternateText="选中" />

<asp:CheckBox ID="CheckBox2" Checked="true" Text="ASP.NET AJAX" runat="server" /><br />

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

TargetControlID="CheckBox2"

CheckedImageUrl="Images/checked.png"

UncheckedImageUrl="Images/unchecked.png"

ImageHeight="16"

ImageWidth="16"

CheckedImageAlternateText="取消"

UncheckedImageAlternateText="选中" />

<!--

TargetControlID：该扩展器目标CheckBox控件的ID，即将要被一对图片替换的CheckBox的ID

CheckedImageUrl：用来替换CheckBox处于启用且选中状态下的图片的URL

UncheckedImageUrl：用来替换CheckBox处于启用且未选中状态下的图片的URL

ImageHeight：用来替换CheckBox的图片的高度，单位像素(px)

ImageWidth：用来替换ChecnBox的图片的宽度，单位像素(px)

CheckedImageAlternateText：当鼠标悬浮在图片上时提示点击图片将取消

UncheckedImageAlternateText：当鼠标悬浮在图片上时提示点击图片将选中

-->

<asp:CheckBox ID="CheckBox3" Checked="true" Text="C#" runat="server" Enabled="False" /><br />

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

TargetControlID="CheckBox3"

ImageWidth="16"

ImageHeight="16"

CheckedImageUrl="Images/checked.png"

UncheckedImageUrl="Images/unchecked.png"

DisabledCheckedImageUrl="Images/checked.png"

DisabledUncheckedImageUrl="Images/unchecked.png" />

<asp:CheckBox ID="CheckBox4" Checked="false" Text="VB.NET" runat="server" Enabled="False" /><br /><br />

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

TargetControlID="CheckBox4"

ImageWidth="16"

ImageHeight="16"

CheckedImageUrl="Images/checked.png"

UncheckedImageUrl="Images/unchecked.png"

DisabledCheckedImageUrl="Images/checked.png"

DisabledUncheckedImageUrl="Images/unchecked.png" />

<!--

DisabledCheckedImageUrl：用来替换CheckBox处于禁用且选中状态下的图片的URL

DisabledUncheckedImageUrl：用来替换CheckBox处于禁用且未选中状态下的图片的URL

-->

<asp:Button ID="btnOK" runat="server" Text="Submit" OnClick="btnOK_Click" /><br /><br />

<asp:Label ID="lbResult" runat="server" Text="[No response provided yet]" />

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

ToggleButtonDemo.aspx.cs代码示例：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class Chapter08_ToggleButtonDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnOK_Click(object sender, EventArgs e)

{

lbResult.Text = string.Format("you <b>{0}</b> like ASP.NET <br /> you <b>{1}</b> like ASP.NET AJAX <br />" +

"you <b>{2}</b> like C# <br /> you <b>{3}</b> like VB.NET ",(CheckBox1.Checked ? "do" : "do not"),

(CheckBox2.Checked ? "do" : "do not"),(CheckBox3.Checked ? "do":"do not"),(CheckBox4.Checked ? "do":"do not"));

}

}

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。