ejmToggleButton

The Essential JavaScript Mobile Toggle Button widget allows you to perform the toggle option by using checked and unchecked state.

Custom Design for HTML ToggleButton control.

$(element).ejmToggleButton()

Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton"></div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton();
        </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.data

    • module:ej.touch

    Members

    cssClass string

    Sets the root class for ToggleButton. This cssClass API helps to use custom skinning option for ToggleButton control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value

    • ””

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-cssclass="customclass"></div>
    
        <style>
            .customclass .e-m-tslider {
                background-color: red !important;
            }
        </style>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ cssClass: "customclass" });
        </script>
    
        <style>
            .customclass .e-m-tslider {
                background-color: red !important;
            }
        </style>

    enabled boolean

    Specifies whether to enable or disable the control.

    Default Value

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-enabled="false"></div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ enabled: false });
        </script>

    enablePersistence boolean

    Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

    Default Value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-enablepersistence="customclass"></div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ enablePersistence: true });
        </script>

    renderMode enum

    Specifies the rendering mode of the control. See RenderMode

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-rendermode="android"></div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ renderMode: "android" });
        </script>

    toggleState boolean

    Specifies whether state of toggle button is on or off.

    Default Value

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-togglestate="false"></div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ toggleState: false });
        </script>

    Methods

    disable()

    To disable the togglebutton.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Disable" data-ej-touchend="disable" />
        <br />
        <div id="togglebutton" data-role="ejmtogglebutton"></div>
    
        <script>
            function disable() {
                $("#togglebutton").ejmToggleButton("disable");
            }
        </script>

    enable()

    To enable the togglebutton.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Disable" data-ej-touchend="disable" />
        <input data-role="ejmbutton" type="button" data-ej-text="Enable" data-ej-touchend="enable" />
        <br />
        <div id="togglebutton" data-role="ejmtogglebutton"></div>
    
        <script>
            function disable() {
                $("#togglebutton").ejmToggleButton("disable");
            }
            function enable() {
                $("#togglebutton").ejmToggleButton("enable");
            }
        </script>

    Events

    change

    Event triggers when the state change occurs.

    Name Type Description
    argument Object Event parameters from togglebutton.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    state boolean Returns the current state of the control.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-change="change"></div>
        <script>
            function change(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ change: "change" });
            function change(args) {
                //handle the event
            }
        </script>

    touchEnd

    Event triggers when touch end happens on the control.

    Name Type Description
    argument Object Event parameters from togglebutton.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    state boolean Returns the current state of the control.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-touchend="touchend"></div>
        <script>
            function touchend(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ touchend: "touchend" });
            function touchend(args) {
                //handle the event
            }
        </script>

    touchStart

    Event triggers when touch start happens on the control.

    Name Type Description
    argument Object Event parameters from togglebutton.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    state boolean Returns the current state of the control.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="togglebutton" data-role="ejmtogglebutton" data-ej-touchstart="touchstart"></div>
        <script>
            function touchstart(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="togglebutton"></div>
        <script>
            $("#togglebutton").ejmToggleButton({ touchstart: "touchstart" });
            function touchstart(args) {
                //handle the event
            }
        </script>