Tiny Colorpicker

Tiny Colorpicker is a crossbrowser jquery plugin that creates a color picker (form) input. Its a easy way to add color pickers to your forms or user interface.

Features

• IOS and Android support.
• AMD, Node, requirejs and commonjs support.
• Easy customizable
• Can be used inside forms or outside
• Lightweight

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: baijs.com

1. INCLUDE JS FILES

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/jquery.tinycolorpicker.js"></script>

2. HTML

<div id="colorPicker">
	<a class="color"><div class="colorInner"></div></a>
	<div class="track"></div>
	<ul class="dropdown"><li></li></ul>
	<input type="hidden" class="colorInput"/>
</div>

3. JAVASCRIPT

$(document).ready(function()
{
	var $box = $('#colorPicker');
	$box.tinycolorpicker();
	var box = $box.data("plugin_tinycolorpicker")

	box.setColor("#ff0000");
});

4. OPTIONS

A list of all the available options and there default value

• colors : [] -- fallback colors for old browsers (ie8-).
• backgroundUrl : "" -- It will look for a css image on the track div. If not found it will look if there's a url in this property.

5. METHODS

• hexToRgb -- Convert a hex color to rgb color
• rgbToHex -- Convert a rgb color to hex
• setColor -- Set the color of the picker it takes a rgb or hex color.

6. EVENTS

$(document).ready(function()
{
    var $box = $('#box');

    $box.tinycolorpicker();

    $box.bind("change", function()
    {
        console.log("do something on every change of color");
    });
});

change -- This event fires on every color change.