Retina Ready jQuery Color Picker with CSS3 Gradients - Iris

Retina Ready jQuery Color Picker with CSS3 Gradients - Iris
File Size: 238KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Iris is an awesome jQuery plugin that makes use of jQuery UI and CSS3 gradients to embed a color picker with HiDPI display support within an input field. The plugin will popup a color selection dialog when a desired input field is focused/clicked.

How to use it:

1. Include jQuery library, jQuery UI and jQuery Iris color picker at the bottom of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="dist/iris.js"></script>

2. Create a color picker for the input field.

<input type="text" id="demo" value="#336699" />

3. Initialize the color picker with options.

<script>
jQuery(document).ready(function($){
$('#demo').iris({
width: 300, // the width in pixel
hide: false, // hide the color picker by default
palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f'] // custom palette
});
});
</script>

4. Configurations.

<script>
jQuery(document).ready(function($){
$('#demo').iris({
width: 300, // the width in pixel
hide: false, // hide the color picker by default
palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f'] // custom palette
color: false,
mode: 'hsl',
controls: {
    horiz: 's', // horizontal defaults to saturation
    vert: 'l', // vertical defaults to lightness
    strip: 'h' // right strip defaults to hue
    },
border: true, // draw a border around the collection of UI elements
target: false, // a DOM element / jQuery selector that the element will be appended within. Only used when called on an input.
width: 200, // the width of the collection of UI elements
change: function(event, ui) { // change callbacks
    // event = standard jQuery event, produced by whichever control was changed.
    // ui = standard jQuery UI object, with a color member containing a Color.js object

    // change the color
    $("#SELECTOR").css( 'color', ui.color.toString());
}
});
});
</script>

Change log:

v1.0.5 (2014-04-04)


This awesome jQuery plugin is developed by Automattic. For more Advanced Usages, please check the demo page or visit the official website.