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