Simple jQuery UI enabled Color Picker – evol-colorpicker.js
If you are looking for simple color picker for your website to dynamically set or insert color code in database. I found awesome color picker plugin (evol-colorpicker.js). 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.
Integrate evol-colorpicker on input box
Libraries
Load jQuery UI theme CSS, as well as its own included base CSS file (evol-colorpicker.css). Here we use the “ui-lightness” theme as an example. Then 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).
<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="evol-colorpicker.min.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/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="evol-colorpicker.min.js" type="text/javascript" charset="utf-8">script> |
Now create simple text box, where on focus a color picker popup will open to select any color code you want.
$(function() { $('#mycolor').colorpicker(); }); |
Create a basic inline color picker with “web” default palette on your web page.
$(function() { $('#inline').colorpicker({ defaultPalette:'web' }); }); |
You can customize colorpicker by using following options.
$(function() { $("#mycolor").colorpicker({ color: "#ffffff", //Used to set the color value. defaultPalette: 'web', //Used to set the default color palette. Possible values are "theme" or "web". displayIndicator:false, //Used to show color value on hover and click inside the palette. hideButton: true, //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. history: false, //Used to track selection history (shared among all instances of the colorpicker). The history keeps the last 28 colors selections. initialHistory: ["#ff0000", "#00ff00", "#0000ff"], //Used to provide a color selection history. Colors are provided as strings of hexadecimal color values. showOn: "button", //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. transparentColor: true //Allow for selection of the "transparent color". The hexadecimal value for the transparent color is "#0000ffff". }); }); |
There are list of public methods to customize the color picker.
$(function() { $("#mycolor").colorpicker("clear"); //Clears the color value (and close the popup palette if opened). $("#mycolor").colorpicker("enable"); //Get the currently selected color value (returned as a string). $("#mycolor").colorpicker("disable"); //Get the currently selected color value (returned as a string). $("#mycolor").colorpicker("isDisabled"); //Get the currently selected color value (returned as a string). //Get or set the currently selected color value (as a string, ie. "#d0d0d0"). var colorValue = $("#mycolor").colorpicker("val"); $("#mycolor").colorpicker("val", "#d0d0d0"); $("#mycolor").colorpicker("showPalette"); //Show the palette (when using the widget as a popup). $("#mycolor").colorpicker("hidePalette"); //Hide the palette (when using the widget as a popup). }); |
List of events
// This event is triggered when a color is selected. $("#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. $("#mycolor").on("mouseover.color", function(event, color){ $('#title').css('background-color', color); }); |
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
