Getting Started with the Switch
This guide demonstrates how to get up and running with the Kendo UI for jQuery Switch.
After the completion of this guide, you will be able to achieve the following end result:
<input id="switch" />
<script>
// Target the input element by using jQuery and then call the kendoSwitch() method.
$("#switch").kendoSwitch({
messages: {
checked: "YES",
unchecked: "NO"
},
size:"large",
thumbRounded:"large",
trackRounded:"large"
});
</script>
1. Create an Empty input Element
First, create an <input/> element on the page that will serve as the initialization element of the Switch component.
<input id='switch'/>
2. Initialize the Switch
In this step, you will initialize the Switch from the <input> element. All settings of the Switch will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<input id="switch"/>
<script>
// Target the input element by using jQuery and then call the kendoSwitch() method.
$("#switch").kendoSwitch();
</script>
3. Define the Switch Appearance
Once the basic initialization is completed, you can start adding additional configurations to the Switch. The component allows you to specify various styling options.
<input id="switch"/>
<script>
// Target the input element by using jQuery and then call the kendoSwitch() method.
$("#switch").kendoSwitch({
size:"large",
thumbRounded:"large",
trackRounded:"large"
});
</script>
4. Configure the Switch Labels
The Switch allows you to configure the text of the checked/unchecked states through its messages option.
<input id="switch"/>
<script>
// Target the input element by using jQuery and then call the kendoSwitch() method.
$("#switch").kendoSwitch({
messages:{
checked: "YES",
unchecked: "NO"
},
size:"large",
thumbRounded:"large",
trackRounded:"large"
});
</script>