evol-colorpicker is a web color picker similar to the one in Microsoft Office 2010. It can be used inline or as a popup associated with a text box.
It comes with several color palettes, can keep track of selection history, and supports “transparent” color. It is a complete jQuery UI tool, supporting various configurations and themes.
Must Read: Colorize Characters In Text Highlight Words in a String | Word Highlighter
How to make use of it:
Installation:
# NPM $ npm install evol-colorpicker # Bower $ bower install evol-colorpicker
1. Add the required jQuery & jQuery UI frameworks to your webpage.
<link rel="stylesheet" href="jquery-ui.css"> <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script>
2. Download and include the jQuery evol.colorpicker
plugin’s library.
<link href="css/evol.colorpicker.min.css" rel="stylesheet"> <script src="js/evol.colorpicker.min.js"></script>
3. Create an inline color picker with a “web” default palette on your web page.
<div id="inline-demo"></div>
$('#inline-demo').colorpicker({ color:'#31859b', defaultPalette:'web' });
4. Create a popup color picker appending to a text field that’s triggered on focus.
<input id="focus-demo" value="#dbeef3">
$('#focus-demo').colorpicker({showOn:'focus'});
5. Full plugin options.
$('#SELECTOR').colorpicker({ // initial color color: null, // example: ["#ff0000", "#00ff00", "blue"], customTheme: null, // possible values: 'focus','button','both' showOn: 'both', // Shows a trigger button next to the text box hideButton: false, // Shows color value on hover and click inside the palette displayIndicator: true, // Allows for selection of the "transparent color". transparentColor: false, // Tracks selection history history: true, // possible values: 'theme', 'web' defaultPalette: 'theme', // Used to translate the widget. strings: 'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.' });
6. Strategies.
// enable the plugin $("#SELECTOR").colorpicker("enable"); // Clears the color value (and close the popup palette if opened). $("#SELECTOR").colorpicker("clear"); // disable the plugin $("#SELECTOR").colorpicker("disable"); // Get or set the currently selected color value var colorValue = $("##SELECTOR").colorpicker("val"); $("#SELECTOR").colorpicker("val", "#d0d0d0"); // Show the palette $("#SELECTOR").colorpicker("showPalette"); // Hide the palette $("#SELECTOR").colorpicker("hidePalette");
7. Events
// triggered when a color is selected. $("#SELECTOR").on("change.color", function(event, color){ $('#ELEMENT').css('background-color', color); }); // triggered when the mouse moves over a color box on the palette $("#SELECTOR").on("mouseover.color", function(event, color){ $('#element').css('background-color', color); });
See Demo And Download
Official Website(evoluteur): Click Here
This superior jQuery/javascript plugin is developed by evoluteur. For extra advanced usage, please go to the official website.