Codenstuff.com

Posted: **Sun Sep 21, 2014 5:07 am**

Enjoy!

HSLA-Color-Picker

Easily Integrate a Simple HSLA Color Picker as a JQuery Plugin.

hsla-color-picker.png

Demo:

http://codepen.io/mikethedj4/pen/hrajo

You can also try it with the HTML OnLive Debugger.

How To:

First call the required libraries. (JQuery MUST be called before the plugin!)

Code: Select all

<link type="text/css" rel="stylesheet" href="hsla-picker.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="hsla-picker.js"></script>

Second create a textbox to apply the picker.

Code: Select all

<input class="picker" type="text">

Third call .HSLAColorPicker() to call the plugin after you've applied your function value to whatever you're using it for.

Code: Select all

$(".picker").bind('load focus blur change', function() {
  $("body").css({
    "background-color": $(this).val()
  });
}).HSLAColorPicker();

Usage:

When using this plugin your selector should always be an input[type=text] element.

License:
GPL v.2

Codenstuff.com

HSLA Color Picker [JQuery Plugin]

HSLA Color Picker [JQuery Plugin]