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>