Terry's blog

是建高楼大厦，还是搭窝棚？--------我要建高楼大厦。"只要决心成功，失败就不会把我们击垮" -------《羊皮卷》

博客园 首页 新随笔 联系 订阅 管理
  334 Posts :: 1 Stories :: 216 Comments :: 51 Trackbacks
ToggleButton（双模按钮)控件
功能：
    ToggleButtonExtender控件用于扩展CheckBox控件，以图形方式来显示。
属性：
    CheckedImageAlternateText：选中CheckBox中图像的替换文本。
    CheckedImageUrl：选中CheckBox中图像的路径。
    UncheckedImageAlternateText：未选中CheckBox中图像的替换文本。
    UncheckedImageUrl：未选中CheckBox中图像的路径。
    ImageHeight：图像的高度。
    ImageWidth：图像的宽度。
    TargetControlID：该控件的目标控件。

代码实例：
 <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
    
    <table>
        <tr>
            <td height="50" vAlign="bottom">请问您的性别是：
            </td>
            <td><asp:CheckBox ID="chkGender" runat="server" />
                <ajaxToolkit:ToggleButtonExtender ID="tbeGender" runat="server"
                    TargetControlID="chkGender" CheckedImageAlternateText="男生"
                    CheckedImageUrl="Images/Boy.gif"
                    ImageHeight="48" ImageWidth="48"
                    UncheckedImageAlternateText="女生"
                    UncheckedImageUrl="Images/Girl.gif">
                </ajaxToolkit:ToggleButtonExtender>
            </td>
        </tr>
        <tr>
            <td height="50" vAlign="bottom">您今天的心情如何：
            </td>
            <td><asp:CheckBox ID="chkMood" runat="server" />
                <ajaxToolkit:ToggleButtonExtender ID="tbeMood" runat="server"
                    TargetControlID="chkMood" CheckedImageAlternateText="好心情"
                    CheckedImageUrl="Images/Smile.gif" 
                    ImageHeight="48" ImageWidth="48"
                    UncheckedImageAlternateText="心情差"
                    UncheckedImageUrl="Images/Sad.gif">
                </ajaxToolkit:ToggleButtonExtender>      
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center" height="50" vAlign="bottom">
                <asp:Button ID="btnSend" runat="server" Text="送出" onclick="btnSend_Click" />
            </td>
        </tr>
    </table>
        
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="lblMessage" runat="server"></asp:Label>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnSend" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

    </form>
</body>
 添加送出按钮事件：
    protected void btnSend_Click(object sender, EventArgs e)
    {
        if (IsPostBack)
        {           
            string gender  = this.chkGender.Checked ? "男生": "女生";
            string mood =this.chkMood.Checked? "拥有好心情，整天都愉快！": "不要那么沮丧，振作点！";
            this.lblMessage.Text = "您是" + gender +"<br>"+mood;
       
        }
    }

运行结果：
        
单击 心情后面的图片后，如下：
        
0
0
(请您对文章做出评价)
« 上一篇：TextBoxWatermark(水印文本框)控件
» 下一篇：ValidatorCallout控件
posted on 2007-11-14 15:10 王晓成 阅读(1019) 评论(2)  编辑 收藏 所属分类: Ajax

Feedback

#1楼 2007-11-20 10:18 eika      
刚才自己试着做了一下ToggleButton的例子，虽然功能实现了，但忽然发现CheckedImageAlternateText和UncheckedImageAlternateText属性不明白是什么用途，于是搜索了一下，发现了这里，现在已经明白啦 \(^o^)/
我虽然是超级初学者，对编程也没那么热衷，但唯独对Ajax非常感兴趣，喜欢它的用户体验。
感谢博主提供这么全面的Ajax专题，辛苦了=^.^=


  回复  引用  查看    

#2楼[楼主] 2007-11-20 11:05 王晓成      
@eika
:)

  回复  引用  查看