Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-07-16 22:44:30 -06:00
Code Issues Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Peter Dematté 2015-02-11 21:17:14 +01:00
parent 6676b3af31
commit b8f8695a42
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -20,18 +20,7 @@ Supported color spaces are: rgb, hsv(b), hsl, HEX
$('.color').colorPicker(); // that's it $('.color').colorPicker(); // that's it
</script> </script>
``` ```
##colors.js
```javascript
Colors({ // all options have a default value...
color: 'rgba(204, 82, 37, 0.8)', // initial color (#RGB, RGB, #RRGGBB, RRGGBB, rgb(r, g, b), ...)
grey: {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
luminance: {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required
customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)
convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...
});
```
##jqColorPicker.js ##jqColorPicker.js
colorPicker uses an instance of Colors and passes the options to it, so some values are the same... colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
@ -45,6 +34,7 @@ $('.color').colorPicker({
doRender: true, // manipulate color ans bgColor of input field doRender: true, // manipulate color ans bgColor of input field
opacity: true, // enable / disable alpha slider opacity: true, // enable / disable alpha slider
renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move
// toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,...
buidCallback: function($elm) {}, // this === instance; $elm: the UI buidCallback: function($elm) {}, // this === instance; $elm: the UI
css: '', // replaces existing css css: '', // replaces existing css
cssAddon: '', // adds css to existing cssAddon: '', // adds css to existing
@ -55,6 +45,20 @@ $('.color').colorPicker({
body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change) body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change)
}); });
``` ```
##colors.js
This section only shows the options for color.js. They are picked up automatically if set in $('.color').colorPicker
```javascript
Colors({ // all options have a default value...
color: 'rgba(204, 82, 37, 0.8)', // initial color (#RGB, RGB, #RRGGBB, RRGGBB, rgb(r, g, b), ...)
grey: {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
luminance: {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required
customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)
convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...
});
```
##The color model, the methods and more ##The color model, the methods and more