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.
color picker demo, jquery color picker, eyedropper in word, dynamic color picker, jquery color palette, add a color picker to your website
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 information after jQuery library.
<link href="css/evol.colorpicker.min.css" rel="stylesheet"> <script src="js/evol.colorpicker.min.js"></script>
3. Create a primary inline coloration picker with a “web” default palette on your internet web page.
<div id="inline-demo"></div>
$('#inline-demo').colorpicker({ color:'#31859b', defaultPalette:'web' });
4. Create a popup coloration 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 choices.
$('#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. Public 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); });
Microsoft Office Style Color Picker Plugin, evol-colorpicker Github
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.
Be First to Comment