This time I will share jQuery Plugin and tutorial about Stylish Circular Color Picker Plugin with jQuery – SmallColorPicker, hope it will help you in programming stack.
| File Size: | 144 KB |
|---|---|
| Views Total: | 2314 |
| 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
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
2 |
<script src="js/color.js"></script> |
3 |
<script src="js/transform2d.js"></script> |
4 |
<script src="js/circle-picker.js"></script> |
5 |
<script src="js/circle-picker.jquery.js"></script> |
2. Include required CSS files on the webpage
1 |
<link href="small-color-picker.min.css" rel="stylesheet" type="text/css"> |
2 |
<link href="color-buttons.min.css" rel="stylesheet" type="text/css"> |
3. Create a container for color picker box
1 |
<div id="color-selector-box"></div> |
4. The javascript
01 |
$("#color-selector-box").smallColorPicker({ |
02 |
placement: { |
03 |
position: "static", |
04 |
popup: false |
05 |
}, |
06 |
colors: { |
07 |
colorOld: "#990e8d", |
08 |
colorNew: "#6d1f7a" |
09 |
}, |
10 |
behavior: { |
11 |
hideOnSelect: false |
12 |
}, |
13 |
events: { |
14 |
ok: function(color) { |
15 |
console.log("ok", color); |
16 |
} |
17 |
} |
18 |
}); |
5. Colorpicker’s default options.
01 |
$("#color-selector-box").smallColorPicker({ |
02 |
placement: { |
03 |
position: "absolute", |
04 |
top: "0", |
05 |
left: "0", |
06 |
parent: null, |
07 |
popup: true |
08 |
}, |
09 |
colors: { |
10 |
colorOld: null, |
11 |
colorNew: "#ff0000" |
12 |
}, |
13 |
texts: { |
14 |
ok: "OK", |
15 |
cancel: "Cancel", |
16 |
switchModeToNum: "Show numbers", |
17 |
switchModeToCol: "Show color wheel" |
18 |
}, |
19 |
behavior: { |
20 |
rotate: true, |
21 |
hideOnSelect: true, |
22 |
mode: SmallColorPicker.Mode.COLOR, |
23 |
switchMode: true, |
24 |
animation: true |
25 |
} |
26 |
}); |
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.
source : jqueryscript.net
