你的位置:首页 > 软件开发 > ajax > Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox

发布时间:2008-10-23 21:46:00
使用ToggleButton Extender可以创建非常酷的CheckBox,它允许我们使用图片来表示ASP.NET中的CheckBox控件的选择状态。主要内容1.ToggleButton Extender介绍2.完整示例 一.ToggleButton Extender介绍使用ToggleButton Extender可以创建非常酷的CheckBox,它允许我们使用图片来表示ASP.NET中

使用ToggleButton Extender可以创建非常酷的CheckBox,它允许我们使用图片来表示ASP.NET中的CheckBox控件的选择状态。

主要内容

1.ToggleButton Extender介绍

2.完整示例

 

一.ToggleButton Extender介绍

使用ToggleButton Extender可以创建非常酷的CheckBox,它允许我们使用图片来表示ASP.NET中的CheckBox控件的选择状态。实现后的效果如下:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox

ToggleButton示例代码:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox<atlasToolkit:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <atlasToolkit:ToggleButtonProperties Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        TargetControlID="CheckBox1" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        ImageWidth="19" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        ImageHeight="19"Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        UncheckedImageUrl="ToggleButton_Unchecked.gif" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        CheckedImageUrl="ToggleButton_Checked.gif">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    </atlastoolkit:ToggleButtonProperties >Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox</atlasToolkit:ToggleButtonExtender>

属性如下所示:

属性

解释

TargetControlID

要扩展的CheckBox的ID

UncheckedImageUrl

未选择时的图片路径

CheckedImageUrl

选中后的图片路径

ImageWidth

图片的宽度

ImageHeight

图片的高度

二.完整示例

下面看一个完整的示例[来自于http://blogs.vertigosoftware.com]。新建一个Web Site站点后,在ASPX页面的顶部加入对AtlasControlToolkit的引用:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBoxAtlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox<%Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox@ Register Assembly="AtlasControlToolkit" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox            Namespace="AtlasControlToolkit" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox            TagPrefix="atlastoolkit" %>

在页面中加入四个CheckBox,我们将对其中的三个进行扩展:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox<div class="togglebutton">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <asp:CheckBox ID="CheckBox1" runat="server" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        Text="Default ASP.NET Checkbox" /><br /><br />Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <asp:CheckBox ID="CheckBox2" runat="server" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        Text="Improved Checkbox with the ToggleButtonExtender" /><br /><br />Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <asp:CheckBox ID="CheckBox3" runat="server" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        Checked="true" Text="Can extend multiple checkboxes" /><br />Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <asp:CheckBox ID="CheckBox4" runat="server" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        Text="Any icon can be used" />Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox</div>

在解决方案资源管理器中,建立Images文件夹,保存必要的图片,再下载的示例中有。现在添加ToggleButtonExtender,对三个CheckBox进行扩展,添加三个ToggleButtonProperties:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox<atlastoolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <atlastoolkit:ToggleButtonProperties Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        TargetControlID="CheckBox2" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        CheckedImageUrl="images/checked.png"Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        UncheckedImageUrl="images/unchecked.png" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        ImageHeight="16" ImageWidth="16">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    </atlastoolkit:ToggleButtonProperties >Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <atlastoolkit:ToggleButtonProperties Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        TargetControlID="CheckBox3" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        CheckedImageUrl="images/checked.png"Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        UncheckedImageUrl="images/unchecked.png" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        ImageHeight="16" ImageWidth="16">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    </atlastoolkit:ToggleButtonProperties >Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    <atlastoolkit:ToggleButtonProperties Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        TargetControlID="CheckBox4" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        CheckedImageUrl="images/ToggleButton_Checked.gif"Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        UncheckedImageUrl="images/ToggleButton_Unchecked.gif" Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        ImageHeight="19" ImageWidth="19">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    </atlastoolkit:ToggleButtonProperties >Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox</atlastoolkit:ToggleButtonExtender>

还有几个使用到的CSS样式:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox<style type="text/css">Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBoxAtlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    body {Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox}{Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        font:normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        color:#666;Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        margin:20px;Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    }Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBoxAtlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    .togglebutton {Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox}{Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        padding-top:13px;Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    }Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBoxAtlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    .togglebutton label {Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox}{Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox        padding-left:8px;Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox    }Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox</style>

好了,整个过程就完成了,可以看到使用Extender的过程非常简单,编译运行:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox

选择后:

Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox
完整示例下载:http://files.cnblogs.com/Terrylee/ToggleButtonDemo.rar

原标题:Atlas学习手记(14):使用ToggleButtonExtender来装扮CheckBox

关键词:atlas

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录