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”檔案，選擇“在瀏覽器中查看”，最後的效果應該出來了，比較酷喲！