Jquery Plugin
Color Picker
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.
- 4.5/5.0
- Last updated 09 September, 2022
- By Admin
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).
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); });
I hope it can help you..