Atlas 学习之001：“ToggleButtonExtender”

 原文地址：http://blogs.vertigosoftware.com/alanl/archive/2006/07/27/3156.aspx

源码下载：http://blogs.vertigosoftware.com/files/alan/atlastogglebutton.zip

译文概要：

    使用“Atlas Control Toolkit”中的“ToggleButtonExtender”，你可以创建非常酷的“checkboxes”：“ ToggleButtonExtender”使用图片 来“装扮”ASP.NET 的“Checkbox”控件 ！

 

详细步骤：

1、打开“Visual Studio 2005”，“新建网站”、在“我的模板”中选择“"Atlas" Web Site”、至于“位置”和“语言”，你可以随意选了，确定。

 

2、双击“Default.aspx”打开它，把下面的代码贴在“<form id="form1" runat="server">”的下面：

< atlas:ScriptManager ID = " ScriptManager1 "  runat = " server "   />
         < div  class = " togglebutton " >
             < asp:CheckBox ID = " CheckBox1 "  runat = " server "  Text = " Default ASP.NET Checkbox "   />< br  />< br  />
             < asp:CheckBox ID = " CheckBox2 "  runat = " server "  Text = " Improved Checkbox with the ToggleButtonExtender "   />< br  />
             < asp:CheckBox ID = " CheckBox3 "  runat = " server "  Checked = " true "  Text = " Can extend multiple checkboxes "   />< br  />
             < asp:CheckBox ID = " CheckBox4 "  runat = " server "  Text = " Any icon can be used "   />
         </ div >
         < atlastoolkit:ToggleButtonExtender ID = " ToggleButtonExtender1 "  runat = " server " >
             < atlastoolkit:ToggleButtonProperties TargetControlID = " CheckBox2 "  CheckedImageUrl = " images/checked.png "
                UncheckedImageUrl = " images/unchecked.png "  ImageHeight = " 16 "  ImageWidth = " 16 "   />
             < atlastoolkit:ToggleButtonProperties TargetControlID = " CheckBox3 "  CheckedImageUrl = " images/checked.png "
                UncheckedImageUrl = " images/unchecked.png "  ImageHeight = " 16 "  ImageWidth = " 16 "   />
             < atlastoolkit:ToggleButtonProperties TargetControlID = " CheckBox4 "  CheckedImageUrl = " images/ToggleButton_Checked.gif "
                UncheckedImageUrl = " images/ToggleButton_Unchecked.gif "  ImageHeight = " 19 "  ImageWidth = " 19 "   />
         </ atlastoolkit:ToggleButtonExtender >

 

3、选择“解决方案资源管理器”，新建“image”文件夹，然后把以下4个图片文件贴在“image”文件夹里，注意每个文件的名字不要搞错了！
：checked.png
：unchecked.png
：ToggleButton_Checked.gif
：ToggleButton_Unchecked.gif

4、选择“解决方案资源管理器”，右击“Bin”文件夹，把“AtlasControlToolkit.dll”、“Microsoft.AtlasControlExtender.dll”两个文件引用进来，这两个文件的位置大约如下：
“D:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/atlastogglebutton/70397d33/_shadow/70e01143/bin/1”，实在找不到，搜索一下！

 

5、保存网站所有文件，右击“ToggleButton.aspx”文件，选择“在浏览器中查看”，最后的效果应该出来了，比较酷哟！