What is it?
Tiny Colorpicker is a crossbrowser lib that creates a color picker (form) input. Its a easy way to add color pickers to your forms or user interface.
It comes in 2 flavours as a vanilla Javascript microlib and as a jQuery plugin.
Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.
Features
- IOS, Android and Windows Phone support.
- Available as a jQuery plugin and as a vanilla Javascript microlib.
- AMD, Node, requirejs and commonjs support.
- Easy customizable
- Can be used inside forms or outside
- Lightweight
- Source is on GitHub
Examples
The examples below are all for the jQuery Plugin. You can find some more (advanced and simple) examples here. You can also find a example for the plain javascript library there.
The example below is the most basic version. The colors are just a image that is taken from the css and drawn to a canvas. So you are completely free in how your picker looks and how its styled.
$(document).ready(function()
{
$("#colorpicker1").tinycolorpicker();
});
The example below is to make clear that it can pick colors from any image in any shape or form you want. The image is taken from stylesheet.
$(document).ready(function()
{
$("#colorpicker2").tinycolorpicker();
});
The example below is to show how to use the setColor method.
$(document).ready(function()
{
$("#colorPicker3").tinycolorpicker();
var picker = $('#colorPicker3').data("plugin_tinycolorpicker");
picker.setColor("#FF45CC");
});
The generated API docs will be included here.
Usage
$(document).ready(function()
{
// Initialize a colorpicker like this.
//
var $box = $('#box');
$box.tinycolorpicker();
// Try this to get access to the actual colorpicker instance.
//
var box = $box.data("plugin_tinycolorpicker");
// Now you have access to all the methods and properties.
//
// box.setColor("#cccccc");
// console.log(box.colorRGB);
//
// etc..
// You can bind to the change event like this.
//
$box.bind("change", function()
{
console.log("do something when a new color is set");
});
});