Stylish Circular Color Picker Plugin with jQuery - SmallColorPicker
File Size: | 144 KB |
---|---|
Views Total: | 2578 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SmallColorPicker is a fancy and touch-enabled library that takes advantage of jQuery and CSS3 features to create stylish circular color pickers with color wheel and text input modes. With this plugin, you can create a color select box or a button which popups a tooltip-like color picker interface on clicking.
You might also like:
- Beautiful jQuery Color Picker For Bootstrap - Pick-a-Color
- Smooth Color Picker Plugin with jQuery and Bootstrap - jqolor
- Customizable and Touch-Friendly jQuery Color Picker Plugin - spectrum
- jQuery Color Picker Plugin - wColorPicker
- Simple Color Picker Plugin - colorselector
- Colorpicker Plugin For Bootstrap
Basic Usage:
1. Include necessary javascript files in the head section of your webpage
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/color.js"></script> <script src="js/transform2d.js"></script> <script src="js/circle-picker.js"></script> <script src="js/circle-picker.jquery.js"></script>
2. Include required CSS files on the webpage
<link href="small-color-picker.min.css" rel="stylesheet" type="text/css"> <link href="color-buttons.min.css" rel="stylesheet" type="text/css">
3. Create a container for color picker box
<div id="color-selector-box"></div>
4. The javascript
$("#color-selector-box").smallColorPicker({ placement: { position: "static", popup: false }, colors: { colorOld: "#990e8d", colorNew: "#6d1f7a" }, behavior: { hideOnSelect: false }, events: { ok: function(color) { console.log("ok", color); } } });
5. Colorpicker's default options.
$("#color-selector-box").smallColorPicker({ placement: { position: "absolute", top: "0", left: "0", parent: null, popup: true }, colors: { colorOld: null, colorNew: "#ff0000" }, texts: { ok: "OK", cancel: "Cancel", switchModeToNum: "Show numbers", switchModeToCol: "Show color wheel" }, behavior: { rotate: true, hideOnSelect: true, mode: SmallColorPicker.Mode.COLOR, switchMode: true, animation: true } });
Change log:
2017-02-05
- Fixed Wrong popup positioning
This awesome jQuery plugin is developed by antelle. For more Advanced Usages, please check the demo page or visit the official website.