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
$(element).ejToggleButton()
Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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>
<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
<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>
<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
<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>
<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 |
|
returns the toggle button model |
type | string | returns the name of the event |
Example
<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 |
|
returns the toggle button model |
status | boolean | return the toggle button state |
type | string | returns the name of the event |
Example
<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 |
|
returns the toggle button model |
type | string | returns the name of the event |
Example
<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 |
|
returns the toggle button model |
type | string | returns the name of the event |
Example
<input id="toggle" type="checkbox" />
<script>
//destroy event for toggle button
$("#toggle").ejToggleButton({
defaultText:"Play",activeText:"Pause",
destroy: function (args) {}
});
</script>