Sign In | Join

Home / AJAX

HOW TO Use the ToggleButton Control

RSS
Modified on 2009/12/24 04:05 by Chris Muench Categorized as Uncategorized

ToggleButton Demonstration



ToggleButton Description

ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton enables the use of custom images to show the state of the CheckBox. The behavior of the CheckBox is unaffected.

Video - How Do I: Use the ASP.NET AJAX ToggleButton Control?

ToggleButton Client Code Sample

<!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>Untitled Page</title>
    <style type="text/css">
    </style>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>    
    <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        Sys.require(Sys.components.toggleButton, function() {
            $().toggleButton.defaults = {
                CheckedImageUrl: "images/ToggleButton_checked.gif",
                UncheckedImageUrl: "images/ToggleButton_unchecked.gif",
                ImageWidth: 20,
                ImageHeight: 20
            };
            $("#toggle1").toggleButton();
            $("#toggle2").toggleButton();
        });
    </script>
</head>
<body>

    <input type="checkbox" id="toggle1" /><label for="toggle1">Enable option 1?</label>
    <input type="checkbox" id="toggle2" /><label for="toggle2">Enable option 2?</label>
    
    
</body>
</html>

ToggleButton Client Properties

ToggleButton Server Code Sample

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:CheckBox ID="CheckBox1" Checked="true" Text="I like ASP.NET" runat="server"/><br />
                <ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
                    TargetControlID="CheckBox1"
                    ImageWidth="19"
                    ImageHeight="19"
                    UncheckedImageUrl="ToggleButton_Unchecked.gif"
                    CheckedImageUrl="ToggleButton_Checked.gif"
                    CheckedImageAlternateText="Check"
                    UncheckedImageAlternateText="UnCheck" />
        
                <asp:CheckBox ID="CheckBox2" Checked="true" Text='I like ASP.NET AJAX' runat="server"/><br /><br />
                <ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"
                    TargetControlID="CheckBox2"
                    ImageWidth="19"
                    ImageHeight="19"
                    UncheckedImageUrl="ToggleButton_Unchecked.gif"
                    CheckedImageUrl="ToggleButton_Checked.gif"
                    CheckedImageAlternateText="Check"
                    UncheckedImageAlternateText="UnCheck" />

                <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
                <br /><br />
                <asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
            </ContentTemplate>
        </asp:UpdatePanel>

ToggleButton Server Properties

The properties in italics are optional.

<ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"
    TargetControlID="CheckBox1" 
    ImageWidth="19" 
    ImageHeight="19"
    CheckedImageAlternateText="Check"
    UncheckedImageAlternateText="UnCheck"
    UncheckedImageUrl="ToggleButton_Unchecked.gif" 
    CheckedImageUrl="ToggleButton_Checked.gif" />
  • TargetControlID - The ID of the CheckBox to modify
  • ImageHeight\ImageWidth - The height and width of the image
  • CheckedImageUrl - the URL of the image to show when the toggle button is in the checked state.
  • UncheckedImageUrl - the URL of the image to show when the toggle button is in the unchecked state.
  • DisabledCheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the checked state.
  • DisabledUncheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the unchecked state.
  • CheckedImageOverUrl - the URL of the image to show when the toggle button is in the checked state and the mouse is over the button.
  • UncheckedImageOverUrl - the URL of the image to show when the toggle button is in the unchecked state and the mouse is over the button.
  • CheckedImageAlternateText - the alt text to show when the toggle button is in the checked state.
  • UncheckedImageAlternateText - the alt text to show when the toggle button is in the unchecked state.
  • CheckedImageOverAlternateText - the alt text to show when the toggle button is in the checked state and the mouse is over the button.
  • UncheckedImageOverAlternateText - the alt text to show when the toggle button is in the unchecked state and the mouse is over the button.
  • ImageHeight/ImageWidth - The height and width, respectively, of the image that will be displayed.

ToggleButton Additional Code Samples