🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

SmallColorPicker is a fancy and touch-enabled library that takes advantage of jQuery and CSS3 features to create stylish circular color pickers with color wheel and text input modes.

color-picker color

Documentation

SmallColorPicker

SmallColorPicker is a tiny jQuery color picker licensed under MIT. Also the project includes buttons styles for color selection.
Live demo page is here. Screenshot:

Small color picker

Features

This color picker includes:

  • color wheel and text input modes;
  • minimalistic popup interface;
  • old (previous) and new (current) color display;
  • color buttons which will automatically change its color;
  • popup and static positioning;
  • text input of colors in natural language;
  • touch devices support;
  • multi-target popup mode (if initialized with several buttons, only one picker will be visible);
  • retina graphics.

This color picker does not include:

  • support of non-CSS3 browsers

Usage

SmallColorPicker initializations should look like this:

try {     $(".color-btn").smallColorPicker({ /* options */ }); } catch (err) {     // the browser is not supported }

Please note: options object is mandatory, you can pass just {}.
You can use color picker either in static mode (e.g. in a control displayed on your page), or in popup mode. In case the picker is initialized in popup mode, only one picker will be created for jQuery selector used for initialization (you can see this on example.html page in the source code). If you are using color buttons from this library, the picker will automatically replace color values in them.
To get an earlier created color picker, call

var picker = $(".color-btn").smallColorPicker();  

If you wish, you can also use the picker in non-jQuery version (new SmallColorPicker.CirclePicker({})) but this is more complex and still requires jQuery for operation.

Options

$(".color-btn").smallColorPicker({     placement: {         position: "absolute", // positioning (ignored in popup mode)         top: "0", // top posision (ignored in popup mode)         left: "0", // left position (ignored in popup mode)         parent: null, // don't pass this if you are using jQuery plugin version         popup: true // popup or static color picker verson     },     colors: {         colorOld: null, // old color (the one displayed on the left)         colorNew: "#ff0000" // new color (displayed on the right; currently selected color)     },     texts: { // texts used in color picker         ok: "OK",         cancel: "Cancel",         switchModeToNum: "Show numbers",         switchModeToCol: "Show color wheel"     },     behavior: {         rotate: true, // whether to rotate color shades square         hideOnSelect: true, // auto hide picker on color select         mode: SmallColorPicker.Mode.COLOR, // default color selection mode          switchMode: true, // whether the user can switch input mode         animation: true // show/hide fade animation      } });

Methods

This code explains usage of methods:

var picker = $(".color-btn").smallColorPicker(); // get the picker picker.show(); // show the picker picker.hide(); // hide the picker picker.toggle(); // toggle picker visibility picker.toggle(true); // show the picker picker.toggle(false); // hide the picker var visible = picker.isVisible(); // is the picker visible picker.switchMode(); // switch input mode between color wheel and numberic picker.switchMode(SmallColorPicker.Mode.COLOR); // switch to clor wheel mode picker.switchMode(SmallColorPicker.Mode.NUMBER); // switch to numeric mode picker.setColors("#ff0000"); // set the displayed (selected) color picker.setColors("#ff0000", "#000000"); // set both colors: displayed (selected) and old (previously selected) var parent = picker.parent(); // get picker current parent picker.parent("#btn2"); // change picker parent picker.destroy(); // completely remove color picker 

Events

Here's how to listen the picker events:

$(".color-btn").on {     scp_ok: function(picker, color) {  }, // color is selected     scp_cancel: function(picker, color) {  }, // color selection cancelled     scp_show: function(picker) {  }, // picker is shown     scp_hide: function(picker) {  } // picker is hidden }

Building

Use grunt to build this project. It will put the result into ../build-v1 folder.


You May Also Like