Simple jQuery UI enabled Color Picker – evol-colorpicker.js

by

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.

jQuery Color Picker

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).

<!--CSS-->
<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">
 
<!--JS-->
<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.

<input style="width:100px;" id="mycolor" />
$(function() {  
 $('#mycolor').colorpicker();
});

Create a basic inline color picker with “web” default palette on your web page.

<div id="inline"></div>
$(function() {  
 $('#inline').colorpicker({
  defaultPalette:'web'
 });
});




You can customize colorpicker by using following options.

$(function() {  
 $("#mycolor").colorpicker({
    color: "#ffffff", 
    defaultPalette: 'web', //Used to set the default color palette. Possible values are "theme" or "web".
    displayIndicator:false, 
    hideButton: true, 
    history: false, 
    initialHistory: ["#ff0000", "#00ff00", "#0000ff"], 
    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"); 
$("#mycolor").colorpicker("enable"); 
$("#mycolor").colorpicker("disable"); 
$("#mycolor").colorpicker("isDisabled"); 
//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"); 
$("#mycolor").colorpicker("hidePalette"); 
});

List of events


$("#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.

DEMO | DOWNLOAD

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.


Published by Rohit