Miscellaneous in JQuery ColorPicker widget
6 Feb 20185 minutes to read
getValue
The getValue() method in ColorPicker returns the hexadecimal value.
In the HTML page, add a <input> element to render ColorPicker widget
<input type="text" id="colorPicker" />
var ColorObj;
jQuery(function ($) {
ColorObj = $("#colorPicker").ejColorPicker({ value: "#278787" }).data('ejColorPicker');
ColorObj.getValue();
});
setValue
The setValue() method in ColorPicker is used to set the color value. The given value is in hexadecimal form.
In the HTML page, add a <input> element to render ColorPicker widget
<input type="text" id="colorPicker" />
var ColorObj;
jQuery(function ($) {
ColorObj = $("#colorPicker").ejColorPicker().data('ejColorPicker');
ColorObj.setValue("#278787");
});
getColor
The getColor() method in ColorPicker control returns the color value in r,g,b,a form.
In the HTML page, add a <input> element to render ColorPicker widget
<input type="text" id="colorPicker" />
var ColorObj;
jQuery(function ($) {
ColorObj = $("#colorPicker").ejColorPicker({ value: "#278787" }).data('ejColorPicker');
ColorObj.getColor();
});
Enable/Disable Colorpicker widget
Colorpicker widget provides you an option to enable /disable the widget. You can disable the TimePicker by setting the “enabled” property value as false.
The following steps explain you to enable/disable property in Colorpicker widget.
In the HTML page, add a <input> element to configure Button widget.
<input type="text" id="colorPicker"/>
// To enable/disable Button controls use the following code example.
//disable Button:
$(function () {
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.disable(); // disables the colorPicker
});
//enable Button:
$(function () {
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.enable(); // enables the colorPicker
});
showTooltip
The showTooltip property of the colorpicker control allows to shows tooltip to notify the slider value in color picker control
<input type="text" id="colorPicker"/>
$(function () {
$('#colorPicker').ejColorPicker({ value: "#278787", showTooltip: true});
});
showSwitcher
The showSwitcher property of the colorpicker control allows show/hides the switcher button in ColorPicker control.It helps to switch palette or picker mode in colorpicker.its default value is true
<input type="text" id="colorPicker"/>
$(function () {
$('#colorPicker').ejColorPicker({ value: "#278787", showSwitcher: false}); // hide the switcher button in colorpicker control.
});
showApplyCancel
The showApplyCancel property of the colorpicker control allows to show/hides the apply and cancel buttons in ColorPicker control.its default value is true.
<input type="text" id="colorPicker"/>
$(function () {
$('#colorPicker').ejColorPicker({ value: "#278787", showApplyCancel: false});
});
showClearButton
The showClearButton property of the colorpicker control allows to show/hides the clear button in ColorPicker control.its default value is true.
<input type="text" id="colorPicker"/>
$(function () {
$('#colorPicker').ejColorPicker({ value: "#278787", showClearButton: false});
});