🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Colorwheel is a small and easy-to-use jQuery plugin to generate a round wheel style color picker that enables the user to select a color from a predefined palette.

color-picker

Documentation

jQuery-Colorwheel

A jQuery Widget for selecting a color from a predefined palette.

Usage

Basic

jQuery Colorwheel

Include the plugin and it's stylesheet after jQuery.

<script src="../dist/jquery.colorwheel.js"></script> <link rel="stylesheet" type="text/css" href="../dist/jquery.colorwheel.css">

In the body of the document create a container.

<div id="widget"></div>

Define the containers dimensions.

<style>    #widget { 	display: block; 	width: 200px; 	height: 200px;	    } </style>

Initialize the widget

jQuery(document).ready(function($) {   $("#widget").colorwheel(); });

Custom Palette

jQuery(document).ready(function($) {   $("#widget").colorwheel('init',     ['000000',  		 '111111',  		 '222222',  		 '333333',  		 '444444',  		 '555555',  		 '666666',  		 '777777',  		 '888888',  		 '999999',  		 'aaaaaa',  		 'bbbbbb',  		 'cccccc',  		 'dddddd',  		 'eeeeee',  		 'ffffff']   ); });

jQuery Colorwheel

Get the value

jQuery(document).ready(function($) {   var value = $("#widget").colorwheel('value'); });

License

Software is licensed under MIT License.

Support

Have a thought on how to improve this software? Contact me directly via email for support at [email protected]. Feel free to share how you are using this code in your own projects.


You May Also Like