Getting Started with the ColorPicker
This guide demonstrates how to get up and running with the Kendo UI for jQuery ColorPicker.
After the completion of this guide, you will achieve the following end result:
<input type="color" id="colorpicker" />
<script>
$(document).ready(function(){
$("#colorpicker").kendoColorPicker({
views:["palette"],
preview:false,
palette: "basic"
});
});
</script>
1. Create an Input Element
First, create an <input> element on the page that will be used to initialize the component. The content of the <input> will be the content of the ColorPicker.
<input type="color" id="colorpicker" />
2. Initialize the ColorPicker
In this step, you will initialize the ColorPicker from the <input> element.
<input type="color" id="colorpicker" />
<script>
$(document).ready(function(){
$("#colorpicker").kendoColorPicker();
});
</script>
3. Apply Configuration Settings
Here, you will apply some settings such as views, preview, format, and palette.
<input type="color" id="colorpicker" />
<script>
$(document).ready(function(){
$("#colorpicker").kendoColorPicker({
views:["palette"], // Set the view for the ColorPicker.
preview:false, // Disable the displaying of the color preview element and the previously selected color for comparison.
palette: "basic" // Define the drop-down that lists the colors.
});
});
</script>