ejToggleButton

11 Jul 201821 minutes to read

The Toggle Button allows you to perform the toggle option by using checked and unchecked state. This Toggle Button can be helpful to user to check their states. The Toggle Button control displays both text and images.

Syntax

  • JAVASCRIPT
  • $(element).ejToggleButton()

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Create ToggleButton 
    $('#toggle').ejToggleButton({defaultText:"Play",activeText:"Pause"});   
        
    </script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.togglebutton.js

    • module:ej.checkbox.js

    Members

    activePrefixIcon string

    Specify the icon in active state to the toggle button and it will be aligned from left margin of the button.

    NOTE

    This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

    Default Value

    • ””

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the activePrefixIcon during initialization.                      
            $("#toggle").ejToggleButton({ 
       defaultText:"Play",activeText:"Pause",
       contentType: "textandimage",
       defaultPrefixIcon: "e-mediaplay e-uiLight",
       activePrefixIcon: "e-mediapause e-uiLight",
     });                    
    </script>

    activeSuffixIcon string

    Specify the icon in active state to the toggle button and it will be aligned from right margin of the button.

    NOTE

    This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

    Default Value

    • ””

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the activeSuffixIcon during initialization.                      
            $("#toggle").ejToggleButton({ 
       contentType: "imageboth",
       defaultSuffixIcon: "e-mediaplay e-uiLight",
       activeSuffixIcon: "e-mediapause e-uiLight",
     });                    
    </script>

    activeText string

    Sets the text when ToggleButton is in active state i.e.,checked state.

    Default Value

    • null

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set activeText API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});                                                   
    </script>

    contentType enum

    Specifies the contentType of the ToggleButton. See ContentType as below

    Name Description
    TextOnly To specify the text contentType
    ImageOnly To specify the image contentType
    ImageBoth To specify the two images of contentType
    TextAndImage To specify the Text and Image contentType
    ImageTextImage To specify the image text and image contentType

    Default Value

    • ej.ContentType.TextOnly

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the button contentType on initialization.                        
            $("#toggle").ejToggleButton({ defaultText:"Play",activeText:"Pause",contentType : ej.ContentType.TextOnly });                    
    </script>

    cssClass string

    Specify the CSS class to the ToggleButton to achieve custom theme.

    Default Value

    • ””

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the CSS class during initialization.                     
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",cssClass : "gradient-lime" });                        
    </script>

    defaultPrefixIcon string

    Specify the icon in default state to the toggle button and it will be aligned from left margin of the button.

    NOTE

    This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

    Default Value

    • ””

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the defaultPrefixIcon during initialization.                     
            $("#toggle").ejToggleButton({ 
       defaultText:"Play",activeText:"Pause",
       contentType: "textandimage",
       defaultPrefixIcon: "e-mediaplay e-uiLight",
       activePrefixIcon: "e-mediapause e-uiLight",
     });                    
    </script>

    defaultSuffixIcon string

    Specify the icon in default state to the toggle button and it will be aligned from right margin of the button.

    NOTE

    This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

    Default Value

    • ””

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the defaultSuffixIcon during initialization.                     
     $("#toggle").ejToggleButton({ 
       defaultText:"Play",activeText:"Pause",
       contentType: "textandimage",
       defaultSuffixIcon: "e-mediaplay e-uiLight",
       activeSuffixIcon: "e-mediapause e-uiLight",
     });                    
    </script>

    defaultText string

    Specifies the text of the ToggleButton, when the control is a default state. i.e., unChecked state.

    Default Value

    • null

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set defaultText API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});                                           
    </script>

    enabled boolean

    Specifies the state of the ToggleButton.

    Default Value

    • true

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set enabled API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",enabled: true });                                            
    </script>

    enablePersistence boolean

    Save current model value to browser cookies for maintaining states. When refreshing the ToggleButton control page, the model value is applied from browser cookies or HTML 5
    local storage.

    Default Value

    • false

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the rounded corner during initialization.                        
            $("#toggle").ejToggleButton({ defaultText:"Play",activeText:"Pause",enablePersistence : true });                         
    </script>

    enableRTL boolean

    Specify the Right to Left direction of the ToggleButton.

    Default Value

    • false

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the enableRTL during initialization.                     
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",enableRTL : true });                  
    </script>

    height number|string

    Specifies the height of the ToggleButton.

    Default Value

    • 28pixel

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set height API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",height: "28px" });                                           
    </script>

    htmlAttributes object

    It allows to define the characteristics of the ToggleButton control. It will helps to extend the capability of an HTML element.

    Default Value

    • {}

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // To Set HtmlAttributes on initialization.                     
            $("#toggle").ejToggleButton({ defaultText:"Play",activeText:"Pause",htmlAttributes: {disabled:"disabled"} });                    
    </script>

    imagePosition enum

    Specifies the image position of the ToggleButton.

    NOTE

    This image position is applicable only with the contentType property value set as textandimage. The images can be positioned in both imageLeft and imageRight options.

    Name Description
    ImageRight To specify Left position of the toggle button
    ImageLeft To specify Right position of the toggle button
    ImageTop To specify Top position of the toggle button
    ImageBottom To specify Bottom position of the toggle button

    Default Value

    • ej.ImagePosition.ImageLeft

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the image position for toggle button during initialization.                      
            $("#toggle").ejToggleButton(
    {
       contentType: ej.ContentType.TextAndImage,
       imagePosition: ej.ImagePosition.ImageRight,
       defaultText:"Play",activeText:"Pause",
       defaultPrefixIcon: "e-mediaplay e-uiLight",
       activePrefixIcon: "e-mediapause e-uiLight"
    });                     
    </script>

    preventToggle boolean

    Allows to prevents the control switched to checked (active) state.

    Default Value

    • false

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set preventToggle API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",preventToggle: false});                                              
    </script>

    showRoundedCorner boolean

    Displays the ToggleButton with rounded corners.

    Default Value

    • false

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    // Set the rounded corner during initialization.                        
            $("#toggle").ejToggleButton({ defaultText:"Play",activeText:"Pause",showRoundedCorner : true });                         
    </script>

    size enum

    Specifies the size of the ToggleButton. See ButtonSize as below

    Name Description
    Mini To specify the minimum size of the toggle button
    Small To specify the small size of the toggle button
    Medium To specify the medium size of the toggle button
    Large To specify the large size of the toggle button
    Normal To specify the normal size of the toggle button

    Default Value

    • ej.ButtonSize.Normal

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set size API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",size: ej.ButtonSize.Mini});                                                                  
    </script>

    toggleState boolean

    It allows to define the ToggleButton state to checked(Active) or unchecked(Default) at initial time.

    Default Value

    • false

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set toggleState API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",toggleState: false });       
    </script>

    type enum

    Specifies the type of the ToggleButton. See ButtonType as below

    Name Description
    Button To create button with button type as button
    Reset To create button with button type as reset
    Submit To create button with button type as submit

    Default Value

    • ej.ButtonType.Button

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set type API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",type:ej.ButtonType.Submit});                                                                 
    </script>

    width number|string

    Specifies the width of the ToggleButton.

    Default Value

    • 100pixel

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //To set width API value during initialization  
            $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause",width: "100px" });                                           
    </script>

    Methods

    destroy()

    Allows you to destroy the ToggleButton widget.

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
     
    <script>
    // Create toggle button
    $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});
    var toggleObj = $("#toggle").data("ejToggleButton");
    toggleObj.destroy(); // destroy the toggle button
    </script>
  • HTML
  • <input id="toggle" type="checkbox" /> 
     
    <script>
    // destroy the toggle button
    $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});
    $("#toggle").ejToggleButton("destroy"); 
    </script>

    disable()

    To disable the ToggleButton to prevent all user interactions.

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
     
    <script>
    // Create toggle button
    $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});
    var toggleObj = $("#toggle").data("ejToggleButton");
    toggleObj.disable(); // disable the toggle button
    </script>
  • HTML
  • <input id="toggle" type="checkbox" /> 
     
    <script>
    // disable the toggle button
    $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});
    $("#toggle").ejToggleButton("disable"); 
    </script>

    enable()

    To enable the ToggleButton.

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
     
    <script>
    // Create toggle button
    $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});
    var toggleObj = $("#toggle").data("ejToggleButton");
    toggleObj.enable(); // enable the toggle button
    </script>
  • HTML
  • <input id="toggle" type="checkbox" /> 
     
    <script>
    // enable the toggle button
    $("#toggle").ejToggleButton({defaultText:"Play",activeText:"Pause"});
    $("#toggle").ejToggleButton("enable");  
    </script>

    Events

    change

    Fires when ToggleButton control state is changed successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    isChecked boolean return the toggle button checked state
    model object returns the toggle button model
    type string returns the name of the event

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //change event for toggle button
    $("#toggle").ejToggleButton({
       defaultText:"Play",activeText:"Pause",
       change: function (args) {}
    });  
    </script>

    click

    Fires when ToggleButton control is clicked successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    isChecked boolean return the toggle button checked state
    model object returns the toggle button model
    status boolean return the toggle button state
    type string returns the name of the event

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //click event for toggle button
    $("#toggle").ejToggleButton({
    defaultText:"Play",activeText:"Pause",
       click: function (args) {}
    }); 
    </script>

    create

    Fires when ToggleButton control is created successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the toggle button model
    type string returns the name of the event

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //create event for toggle button
    $("#toggle").ejToggleButton({
       defaultText:"Play",activeText:"Pause",
       create: function (args) {}
    });   
    </script>

    destroy

    Fires when ToggleButton control is destroyed successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the toggle button model
    type string returns the name of the event

    Example

  • HTML
  • <input id="toggle" type="checkbox" /> 
            
    <script> 
    //destroy event for toggle button
    $("#toggle").ejToggleButton({
       defaultText:"Play",activeText:"Pause",
       destroy: function (args) {}
    });  
    </script>