Advanced Color Picker
How to use it
Put this code in the <head> section of your HTML file:
<script type="text/javascript">
var baseFolder="";
</script>
<script type="text/javascript" src="acp/js/picker.js"></script>
baseFolder shoud reflect the location for the "acp" folder. (Eg: "/" if is in the root, "/scripts" if it's located in a folder called "scripts".)
Here is the list of parameters accepted
- The request should look like this:
openPallete('param1', param2, param3)where: - param1: mandatory! It represents the ID of the element on which you wish to apply the changes.
- param2: optional. Values are:
- 0(default):
- The hexa value of the picked color is added to the input value specified as param1.
- 1:
- The color picked is set as the background color for the element specified with param1.
- 2:
- The color picked is set as the text color for the element specified with param1.
- 3:
- The color picked is set as the border color for the element specified with param1.
- param3: optional. Values are:
- true(default):
- Puts '#' in front of the hexa value if param2 is 0 (input value).
- false:
- Fills only the hexa value (no '#' in front) if param2 is 0(input value).
Below are some examples of how the color picker works.
Input element with '#'
openPallete('input-color', 0, true) or
openPallete('input-color')
Pick!
Input element without '#'
openPallete('input-color2', 0, false)
Pick!
Background color on any element
openPallete('background-color', 1)
Pick!
Background
Text Color
openPallete('text-color', 2)
Pick!
Text Color
Border Color
openPallete('border-color', 3)
Pick!
Border Color