2017 © Pedro Peláez
 

component colorpicker

jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).

image

evoluteur/colorpicker

jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).

  • Wednesday, June 20, 2018
  • by alphp
  • Repository
  • 26 Watchers
  • 219 Stars
  • 16 Installations
  • JavaScript
  • 0 Dependents
  • 0 Suggesters
  • 101 Forks
  • 8 Open issues
  • 1 Versions
  • 100 % Grown

The README.md

evol-colorpicker · GitHub license npm version

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., (*1)

screenshot 1   screenshot 2   screenshot 3, (*2)

Check the online demo for several examples., (*3)

Table of Contents

  1. Installation
  2. Usage
  3. Theming
  4. Options
  5. Methods
  6. Events
  7. Browser Support
  8. License

, (*4)

Installation

Download or fork evol-colorpicker at GitHub., (*5)

git clone https://github.com/evoluteur/colorpicker

or use the npm package:, (*6)

npm install evol-colorpicker

or install with Bower:, (*7)

bower install evol-colorpicker

, (*8)

Usage

First, 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)., (*9)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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="js/evol-colorpicker.min.js" type="text/javascript" charset="utf-8"></script>

The widget requires a jQuery UI theme to be present, as well as its own included base CSS file (evol-colorpicker.css). Here we use the "ui-lightness" theme as an example:, (*10)

<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="css/evol-colorpicker.css" rel="stylesheet" type="text/css">

Now, let's attach it to an existing <input> tag:, (*11)



<input style="width:100px;" id="mycolor" />

This will wrap it into a "holder" <div> and add another <div> beside it for the color box:, (*12)

<div style="width:128px;">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

Using the same syntax, the widget can also be instanciated on a <div> or a <span> tag to show inline. In that case the generated HTML is the full palette., (*13)

, (*14)

Theming

evol-colorpicker is as easily themeable as any jQuery UI widget, using one of the jQuery UI themes or your own custom theme made with Themeroller., (*15)

Light and Dark themes, (*16)

, (*17)

Options

evol-colorpicker provides several options to customize its behaviour:, (*18)

color (String)

Used to set the color value., (*19)

$("#mycolor").colorpicker({
    color: "#ffffff"
});

Defaults to null., (*20)

defaultPalette (String)

Used to set the default color palette. Possible values are "theme" or "web"., (*21)

$("#mycolor").colorpicker({
    defaultPalette: 'web'
});

Defaults to theme., (*22)

displayIndicator (Boolean)

Used to show color value on hover and click inside the palette., (*23)

$("#mycolor").colorpicker({
    displayIndicator: false
});

Defaults to true., (*24)

hideButton (Boolean)

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., (*25)

$("#mycolor").colorpicker({
    hideButton: true
});

Defaults to false., (*26)

history (Boolean)

Used to track selection history (shared among all instances of the colorpicker). The history keeps the last 28 colors selections., (*27)

$("#mycolor").colorpicker({
    history: false
});

Defaults to true., (*28)

initialHistory (Array strings)

Used to provide a color selection history. Colors are provided as strings of hexadecimal color values., (*29)

$("#mycolor").colorpicker({
    initialHistory: ["#ff0000", "#00ff00", "#0000ff"]
});

Defaults to null., (*30)

showOn (String)

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., (*31)

$("#mycolor").colorpicker({
    showOn: "button"
});

Defaults to "both"., (*32)

strings (String)

Used to translate the widget. It is a coma separated list of all labels used in the UI., (*33)

$("#mycolor").colorpicker({
    strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
});

Defaults to "Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet."., (*34)

transparentColor (Boolean)

Allow for selection of the "transparent color". The hexadecimal value for the transparent color is "#0000ffff"., (*35)

$("#mycolor").colorpicker({
    transparentColor: true
});

Defaults to false., (*36)

, (*37)

Methods

clear()

Clears the color value (and close the popup palette if opened)., (*38)

$("#mycolor").colorpicker("clear");

enable()

Get the currently selected color value (returned as a string)., (*39)

$("#mycolor").colorpicker("enable");

disable()

Get the currently selected color value (returned as a string)., (*40)

$("#mycolor").colorpicker("disable");

isDisabled()

Get the currently selected color value (returned as a string)., (*41)

$("#mycolor").colorpicker("isDisabled");

val([color])

Get or set the currently selected color value (as a string, ie. "#d0d0d0")., (*42)

var colorValue = $("#mycolor").colorpicker("val");

$("#mycolor").colorpicker("val", "#d0d0d0");

showPalette()

Show the palette (when using the widget as a popup)., (*43)

$("#mycolor").colorpicker("showPalette");

hidePalette()

Hide the palette (when using the widget as a popup)., (*44)

$("#mycolor").colorpicker("hidePalette");

, (*45)

Events

change.color

This event is triggered when a color is selected., (*46)

$("#mycolor").on("change.color", function(event, color){
    $('#title').css('background-color', color);
});

mouseover.color

This event is triggered when the mouse moves over a color box on the palette., (*47)

$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').css('background-color', color);
});

, (*48)

License

Copyright (c) 2020 Olivier Giulieri., (*49)

evol-colorpicker is released under the MIT license., (*50)

The Versions

20/06 2018

dev-master

9999999-dev http://evoluteur.github.io/colorpicker/

jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).

  Sources   Download

MIT

The Requires

 

by Olivier Giulieri