- Members
- buttonText
object
- buttonText.apply
string
- buttonText.cancel
string
- buttonText.swatches
string
- buttonMode
enum|string
- columns
number|string
- cssClass
string
- custom
array
- displayInline
boolean
- enabled
boolean
- enableOpacity
boolean
- htmlAttributes
object
- locale
string
- modelType
enum|string
- opacityValue
number|string
- palette
enum|string
- presetType
enum|string
- showApplyCancel
boolean
- showClearButton
boolean
- showPreview
boolean
- showRecentColors
boolean
- showSwitcher
boolean
- showTooltip
boolean
- toolIcon
string
- tooltipText
object
- tooltipText.switcher
string
- tooltipText.addButton
string
- tooltipText.basic
string
- tooltipText.monoChrome
string
- tooltipText.flatColors
string
- tooltipText.seaWolf
string
- tooltipText.webColors
string
- tooltipText.sandy
string
- tooltipText.pinkShades
string
- tooltipText.misty
string
- tooltipText.citrus
string
- tooltipText.vintage
string
- tooltipText.moonLight
string
- tooltipText.candyCrush
string
- tooltipText.currentColor
string
- tooltipText.selectedColor
string
- value
string
- buttonText
- Methods
- Events
Contact Support
ejColorPicker
31 Jan 201924 minutes to read
The ColorPicker control provides you a rich visual interface for color selection. You can select the color from the professionally designed palettes or custom color. By clicking a point on the color, you can change the active color to the color that is located under the pointer.
Syntax
$(element).ejColorPicker(options)
Name | Type | Description |
---|---|---|
options | object | settings for color picker |
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
</script>
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.colorpicker.js
-
module:ej.button.js
-
module:ej.splitbutton.js
-
module:ej.menu.js
-
module:ej.slider.js
NOTE
jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.
Members
buttonText object
The ColorPicker control allows to define the customized text to displayed in button elements. Using the property to achieve the customized culture values.
Default Value
- { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” }
Example
<input type="text" id="colorPicker"/>
<script>
//To set buttonText API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", buttonText: {apply: "Set", cancel: "Close" }});
</script>
buttonText.apply string
Sets the text for the apply button.
Example
<input type="text" id="colorPicker"/>
<script>
//To set buttonText API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", buttonText: {apply: "select"}});
</script>
buttonText.cancel string
Sets the text for the cancel button.
Example
<input type="text" id="colorPicker"/>
<script>
//To set buttonText API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", buttonText: {cancel: "Exit" }});
</script>
buttonText.swatches string
Sets the header text for the swatches area.
Example
<input type="text" id="colorPicker"/>
<script>
//To set buttonText API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", buttonText: {swatches: "colors"}});
</script>
buttonMode enum|string
Allows to change the mode of the button. Please refer below to know available button mode
Name | Description |
---|---|
Split | Displays the button in split mode |
Dropdown | Displays the button in Dropdown mode |
Default Value
- ej.ButtonMode.Split
Example
<input type="text" id="colorPicker"/>
<script>
//To set buttonText API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", buttonMode: ej.ButtonMode.Dropdown});
</script>
columns number|string
Specifies the number of columns to be displayed color palette model.
Default Value
- 10
Example
<input type="text" id="colorPicker"/>
<script>
//To set columns API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", columns: 5});
</script>
cssClass string
This property allows you to customize its appearance using user-defined CSS and custom skin options such as colors and backgrounds.
Default Value
- ””
Example
<input type="text" id="colorPicker"/>
<script>
//To set cssClass API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", cssClass : "gradient-lime"});
</script>
custom array
This property allows to define the custom colors in the palette model.Custom palettes are created by passing a comma delimited string of HEX values or an array of colors.
Default Value
- empty
Example
<input type="text" id="colorPicker"/>
<script>
//To set custom API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", palette: "custompalette", custom: ["ffffff", "ffccff", "ff99ff", "ff66ff", "ff33ff", "ff00ff", "ccffff", "ccccff"]});
</script>
displayInline boolean
This property allows to embed the popup in the order of DOM element flow . When we set the value as true, the color picker popup is always in visible state.
Default Value
- false
Example
<input type="text" id="colorPicker"/>
<script>
//To set displayInline API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", displayInline: true});
</script>
enabled boolean
This property allows to change the control in enabled or disabled state.
Default Value
- true
Example
<input type="text" id="colorPicker"/>
<script>
//To set enabled API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", enabled: false});
</script>
enableOpacity boolean
This property allows to enable or disable the opacity slider in the color picker control
Default Value
- true
Example
<input type="text" id="colorPicker"/>
<script>
//To set enableOpacity API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", enableOpacity: false });
</script>
htmlAttributes object
It allows to define the characteristics of the ColorPicker control. It will helps to extend the capability of an HTML element.
Default Value
- {}
Example
<input type="text" id="colorPicker"/>
<script>
// Set HtmlAttributes to Button on initialization.
$('#colorPicker').ejColorPicker({ htmlAttributes : {disabled:"disabled"}});
</script>
locale string
Defines the localized text values in button and tooltip.
Default Value
- “en-US”
Example
<input type="text" id="colorpicker" />
<script>
// Set the locale value during initialization.
$("#colorpicker").ejColorPicker({ value: "#278787", locale : "zh-CN" });
ej.ColorPicker.Locale["zh-CN"] = {
buttonText: {
apply: "应用",
cancel: "取消",
swatches: "色板"
},
tooltipText: {
switcher: "切换器",
addButton: "添加颜色",
basic: "基本",
monoChrome: "单色铬",
flatColors: "平的颜色",
seaWolf: "海狼",
webColors: "网颜色",
sandy: "沙",
pinkShades: "桃红色树荫",
misty: "蒙蒙",
citrus: "柑橘",
vintage: "葡萄酒",
moonLight: "月光",
candyCrush: "糖果粉碎",
currentColor: "当前颜色",
selectedColor: "所选颜色"
}
};
</script>
modelType enum|string
Specifies the model type to be rendered initially in the color picker control. See below to get available ModelType
Name | Description |
---|---|
Palette | support palette type mode in color picker. |
Picker | support palette type mode in color picker. |
Default Value
- ej.ColorPicker.ModelType.Default
Example
<input type="text" id="colorPicker"/>
<script>
//To set modelType API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette"});
</script>
opacityValue number|string
This property allows to change the opacity value .The selected color opacity will be adjusted by using this opacity value.
Default Value
- 100
Example
<input type="text" id="colorPicker"/>
<script>
//To set opacityValue API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", opacityValue: 20 });
</script>
palette enum|string
Specifies the palette type to be displayed at initial time in palette model.There two types of palette model available in ColorPicker control. See below available Palette
Name | Description |
---|---|
BasicPalette | used to show the basic palette |
CustomPalette | used to show the custompalette |
Default Value
- ej.ColorPicker.Palette.BasicPalette
Example
<input type="text" id="colorPicker"/>
<script>
//To set palette API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", palette: "basicpalette"});
</script>
presetType enum|string
This property allows to define the preset model to be rendered initially in palette type.It consists of 12 different types of presets. Each presets have 50 colors. See below available Presets
Name | Description |
---|---|
Basic | used to show the basic presets |
CandyCrush | used to show the CandyCrush colors presets |
Citrus | used to show the Citrus colors presets |
FlatColors | used to show the FlatColors presets |
Misty | used to show the Misty presets |
MoonLight | used to show the MoonLight presets |
PinkShades | used to show the PinkShades presets |
Sandy | used to show the Sandy presets |
SeaWolf | used to show the Seawolf presets |
Vintage | used to show the Vintage presets |
WebColors | used to show the WebColors presets |
Default Value
- ej.ColorPicker.Presets.Basic
Example
<input type="text" id="colorPicker"/>
<script>
//To set presetType API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", presetType: "vintage"});
</script>
showApplyCancel boolean
Allows to show/hides the apply and cancel buttons in ColorPicker control
Default Value
- true
Example
<input type="text" id="colorPicker"/>
<script>
//To set showApplyCancel API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", showApplyCancel: false});
</script>
showClearButton boolean
Allows to show/hides the clear button in ColorPicker control
Default Value
- true
Example
<input type="text" id="colorPicker"/>
<script>
//To set showClearButton API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", showClearButton: false});
</script>
showPreview boolean
This property allows to provides live preview support for current cursor selection color and selected color.
Default Value
- true
Example
<input type="text" id="colorPicker"/>
<script>
//To set showPreview API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", showPreview: false});
</script>
showRecentColors boolean
This property allows to store the color values in custom list.The ColorPicker will keep up to 11 colors in a custom list.By clicking the add button, the selected color from picker or palette will get added in the recent color list.
Default Value
- false
Example
<input type="text" id="colorPicker"/>
<script>
//To set showRecentColors API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", showRecentColors: true});
</script>
showSwitcher boolean
Allows to show/hides the switcher button in ColorPicker control.It helps to switch palette or picker mode in colorpicker.
Default Value
- true
Example
<input type="text" id="colorPicker"/>
<script>
//To set showSwitcher API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", showSwitcher: false});
</script>
showTooltip boolean
This property allows to shows tooltip to notify the slider value in color picker control.
Default Value
- false
Example
<input type="text" id="colorPicker"/>
<script>
//To set showTooltip API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", showTooltip: true});
</script>
toolIcon string
Specifies the toolIcon to be displayed in dropdown control color area.
Default Value
- null
Example
<input type="text" id="colorPicker"/>
<script>
//To set toolIcon API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", toolIcon: "e-fontcolor-icon"});
</script>
<style>
.e-colorwidget .e-tool .e-fontcolor-icon:before
{
content: "\e632";
margin-top: 9px;
font-size: 10px;
margin-left: 5px;
}
</style>
tooltipText object
This property allows to define the customized text or content to displayed when mouse over the following elements. This property also allows to use the culture values.
Default Value
- { switcher: “Switcher”, addButton: “Add Color”, basic: “Basic”, monoChrome: “Mono Chrome”, flatColors: “Flat Color”, seaWolf: “Sea Wolf”, webColors: “Web Colors”, sandy: “Sandy”, pinkShades: “Pink Shades”, misty: “Misty”, citrus: “Citrus”, vintage: “Vintage”, moonLight: “Moon Light”, candyCrush: “Candy Crush”, currentColor: “Current Color”, selectedColor: “Selected Color” }
tooltipText.switcher string
Sets the tooltip text for the switcher button.
tooltipText.addButton string
Sets the tooltip text for the add button.
tooltipText.basic string
Sets the tooltip text for the basic preset.
tooltipText.monoChrome string
Sets the tooltip text for the mono chrome preset.
tooltipText.flatColors string
Sets the tooltip text for the flat colors preset.
tooltipText.seaWolf string
Sets the tooltip text for the sea wolf preset.
tooltipText.webColors string
Sets the tooltip text for the web colors preset.
tooltipText.sandy string
Sets the tooltip text for the sandy preset.
tooltipText.pinkShades string
Sets the tooltip text for the pink shades preset.
tooltipText.misty string
Sets the tooltip text for the misty preset.
tooltipText.citrus string
Sets the tooltip text for the citrus preset.
tooltipText.vintage string
Sets the tooltip text for the vintage preset.
tooltipText.moonLight string
Sets the tooltip text for the moon light preset.
tooltipText.candyCrush string
Sets the tooltip text for the candy crush preset.
tooltipText.currentColor string
Sets the tooltip text for the current color area.
tooltipText.selectedColor string
Sets the tooltip text for the selected color area.
Example
<input type="text" id="colorPicker"/>
<script>
//To set tooltipText API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787", tooltipText: { switcher: "Switch", currentColor: "New Color", selectedColor: "Old Color" }});
</script>
value string
Specifies the color value for color picker control, the value is in hexadecimal form with prefix of “#”.
Default Value
- null
Example
<input type="text" id="colorPicker"/>
<script>
//To set value API during initialization
$('#colorPicker').ejColorPicker({ value: "#278787"});
</script>
Methods
disable()
Disables the color picker control
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.disable(); // disables the colorPicker
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// disables the colorPicker
$("#colorPicker").ejColorPicker("disable");
</script>
enable()
Enable the color picker control
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.enable(); // enables the colorPicker
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// enable the colorPicker
$("#colorPicker").ejColorPicker("enable");
</script>
getColor()
Gets the selected color in RGB format
####Returns
object
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.getColor(); // gets the selected color in RGB format
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// gets the selected color in RGB format
var color=$("#colorPicker").ejColorPicker("getColor");
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
</script>
getValue()
Gets the selected color value as string
####Returns
string
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
alert(colorObj.getValue()); // gets the selected color value as string
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// gets the selected color value as string
alert($("#colorPicker").ejColorPicker("getValue"));
</script>
hexCodeToRGB(colorCode)
To Convert color value from hexCode to RGB
####Returns
object
Name | Type | Description |
---|---|---|
colorCode | string | Specified HEX code converted to RGB |
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.hexCodeToRGB("#278787"); // Convert color value from hexCode to RGB
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Convert color value from hexCode to RGB
var color=$("#colorPicker").ejColorPicker("hexCodeToRGB","#278787");
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
</script>
hide()
Hides the ColorPicker popup, if in opened state.
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.hide(); // hide the ColorPicker popup
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// hide the ColorPicker popup
$("#colorPicker").ejColorPicker("hide");
</script>
HSVToRGB(HSV)
Convert color value from HSV to RGB
####Returns
object
Name | Type | Description |
---|---|---|
HSV | object | Specified HSV code converted to RGB |
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.HSVToRGB({h:230,s:98,v:98}); // Convert color value from HSV to RGB
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Convert color value from HSV to RGB
var color=$("#colorPicker").ejColorPicker("HSVToRGB","{h:230,s:98,v:98}");
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
</script>
RGBToHEX(rgb)
Convert color value from RGB to HEX
####Returns
string
Name | Type | Description |
---|---|---|
RGB | object | Specified RGB code converted to HEX code |
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
alert(colorObj.RGBToHEX(colorObj.getColor())); // Convert color value from RGB to HEX
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
// Convert color value from RGB to HEX
alert($("#colorPicker").ejColorPicker("RGBToHEX",colorObj.getColor()));
</script>
RGBToHSV(rgb)
Convert color value from RGB to HSV
####Returns
object
Name | Type | Description |
---|---|---|
RGB | object | Specified RGB code converted to HSV code |
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.RGBToHSV({r:39,g:135,b:135}); // Convert color value from RGB to HSV
alert("H="+color.r+", S="+color.g+", V="+color.b);
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Convert color value from RGB to HSV
var color=$("#colorPicker").ejColorPicker("RGBToHSV","{r:39,g:135,b:125}");
alert("H="+color.r+", S="+color.g+", V="+color.b);
</script>
show()
Open the ColorPicker popup.
Example
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.show(); // open the ColorPicker popup
</script>
<input type="text" id="colorPicker"/>
<script>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// open the ColorPicker popup
$("#colorPicker").ejColorPicker("show");
</script>
Events
change
Fires after Color value has been changed successfully.If the user want to perform any operation after the color value changed then the user can make use of this change event.
</tr>Name | Type | Description |
---|---|---|
changeFrom | string | return the previous color value |
model |
|
returns the color picker model |
type | string | returns the name of the event |
value | string | return the changed color value |
Example
<input type="text" id="colorPicker"/>
<script>
//change event for color picker
$('#colorPicker').ejColorPicker({
value: "#278787",
change: function (args) {
// Write a code block to perform operation after changing the color.
}
});
</script>
close
Fires after closing the color picker popup.
Name | Type | Description |
---|---|---|
model |
|
returns the color picker model |
type | string | returns the name of the event |
Example
<input type="text" id="colorPicker"/>
<script>
//close event for color picker
$('#colorPicker').ejColorPicker({
value: "#278787",
close: function (args) {
// Write a code block to perform operation after closing the color picker popup.
}
});
</script>
create
Fires after Color picker control is created. If the user want to perform any operation after the color picker control creation then the user can make use of this create event.
Name | Type | Description |
---|---|---|
|
object | returns the color picker model |
type | string | returns the name of the event |
Example
<input type="text" id="colorPicker"/>
<script>
//create event for color picker
$('#colorPicker').ejColorPicker({
value: "#278787",
create: function (args) {
// Write a code block to perform operation after creating the color picker.
}
});
</script>
destroy
Fires after Color picker control is destroyed. If the user want to perform any operation after the color picker control destroyed then the user can make use of this destroy event.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the color picker model |
type | string | returns the name of the event |
Example
<input type="text" id="colorPicker"/>
<script>
//create event for color picker
$('#colorPicker').ejColorPicker({
value: "#278787",
destroy: function (args) {
// Write a code block to perform operation after creating the color picker.
}
});
</script>
open
Fires after opening the color picker popup
Name | Type | Description |
---|---|---|
model |
|
returns the color picker model |
type | string | returns the name of the event |
Example
<input type="text" id="colorPicker"/>
<script>
//open event for color picker
$('#colorPicker').ejColorPicker({
value: "#278787",
open: function (args) {
// Write a code block to perform operation after opening the color picker popup.
}
});
</script>
select
Fires after Color value has been selected successfully. If the user want to perform any operation after the color value selected then the user can make use of this select event.
Name | Type | Description |
---|---|---|
model |
|
returns the color picker model |
type | string | returns the name of the event |
value | string | return the selected color value |
Example
<input type="text" id="colorPicker"/>
<script>
//select event for color picker
$('#colorPicker').ejColorPicker({
value: "#278787",
select: function (args) {
// Write a code block to perform operation after selecting the color.
}
});
</script>