jQuery UI widget for Style Color Picker Plugin | evol.colorpicker

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Leave a Reply

Your email address will not be published. Required fields are marked *