Wallogit.com
2017 © Pedro Peláez
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
evol-colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline or as a popup bound to a text box. It comes with several color palettes, can track selection history and supports "transparent" color. It is a full jQuery UI widget, supporting various configurations and themes., (*1)
, (*2)
Check the online demo for several examples., (*3)
Download or fork evol-colorpicker at GitHub., (*5)
git clone https://github.com/evoluteur/colorpicker
or use the npm package:, (*6)
npm install evol-colorpicker
or install with Bower:, (*7)
bower install evol-colorpicker
or use the nuget package:, (*8)
dotnet add package evol-colorpicker
First, load jQuery (v3.1 or greater), jQuery UI (v1.12.1 or greater), and the plugin (for earlier version of jQuery-UI, use an earlier version of Colorpicker)., (*10)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8" ></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript" charset="utf-8" ></script> <script src="js/evol-colorpicker.min.js" type="text/javascript" charset="utf-8" ></script>
The widget requires a jQuery UI theme to be present, as well as its own included base CSS file (evol-colorpicker.css). Here we use the "ui-lightness" theme as an example:, (*11)
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css" /> <link href="css/evol-colorpicker.css" rel="stylesheet" type="text/css" />
Now, let's attach it to an existing <input> tag:, (*12)
<input style="width:100px;" id="mycolor" />
This will wrap it into a "holder" <div> and add another <div> beside it for the color box:, (*13)
<div style="width:128px;"> <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" /> <div class="evo-colorind" style="background-color:#8db3e2"></div> </div>
Using the same syntax, the widget can also be instanciated on a <div> or a <span> tag to show inline. In that case the generated HTML is the full palette., (*14)
evol-colorpicker is as easily themeable as any jQuery UI widget, using one of the jQuery UI themes or your own custom theme made with Themeroller., (*16)
, (*17)
evol-colorpicker provides several options to customize its behaviour:, (*19)
Used to set the color value., (*20)
$("#mycolor").colorpicker({
color: "#ffffff",
});
Defaults to null., (*21)
Used to set the default color palette. Possible values are "theme" or "web"., (*22)
$("#mycolor").colorpicker({
defaultPalette: "web",
});
Defaults to theme., (*23)
Used to show color value on hover and click inside the palette., (*24)
$("#mycolor").colorpicker({
displayIndicator: false,
});
Defaults to true., (*25)
When binding the colorpicker to a textbox, a colored button will be added to the right of the textbox unless hideButton is set to true. This option doens't have any effect if the colorpicker is bound to a DIV., (*26)
$("#mycolor").colorpicker({
hideButton: true,
});
Defaults to false., (*27)
Used to track selection history (shared among all instances of the colorpicker). The history keeps the last 28 colors selections., (*28)
$("#mycolor").colorpicker({
history: false,
});
Defaults to true., (*29)
Used to provide a color selection history. Colors are provided as strings of hexadecimal color values., (*30)
$("#mycolor").colorpicker({
initialHistory: ["#ff0000", "#00ff00", "#0000ff"],
});
Defaults to null., (*31)
Have the colorpicker appear automatically when the field receives focus ("focus"), appear only when a button is clicked ("button"), or appear when either event takes place ("both"). This option only takes effect when the color picker is instanciated on a textbox., (*32)
$("#mycolor").colorpicker({
showOn: "button",
});
Defaults to "both"., (*33)
Used to translate the widget. It is a coma separated list of all labels used in the UI., (*34)
$("#mycolor").colorpicker({
strings:
"Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique.",
});
Defaults to "Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet."., (*35)
Allow for selection of the "transparent color". The hexadecimal value for the transparent color is "#0000ffff"., (*36)
$("#mycolor").colorpicker({
transparentColor: true,
});
Defaults to false., (*37)
Clears the color value (and close the popup palette if opened)., (*39)
$("#mycolor").colorpicker("clear");
Get the currently selected color value (returned as a string)., (*40)
$("#mycolor").colorpicker("enable");
Get the currently selected color value (returned as a string)., (*41)
$("#mycolor").colorpicker("disable");
Get the currently selected color value (returned as a string)., (*42)
$("#mycolor").colorpicker("isDisabled");
Get or set the currently selected color value (as a string, ie. "#d0d0d0")., (*43)
var colorValue = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");
Show the palette (when using the widget as a popup)., (*44)
$("#mycolor").colorpicker("showPalette");
Hide the palette (when using the widget as a popup)., (*45)
$("#mycolor").colorpicker("hidePalette");
This event is triggered when a color is selected., (*47)
$("#mycolor").on("change.color", function (event, color) {
$("#title").css("background-color", color);
});
This event is triggered when the mouse moves over a color box on the palette., (*48)
$("#mycolor").on("mouseover.color", function (event, color) {
$("#title").css("background-color", color);
});
Copyright (c) 2024 Olivier Giulieri., (*50)
evol-colorpicker is released under the MIT license., (*51)
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
MIT