Directions:
Simply download
yuicolorpicker.zip,
and open up "demo.htm" using any text or HTML editor for the code to insert onto your
page.
Customization:
While this script references multiple .js files, to integrate the color picker with your form
in the fashion above, you do not need to be bothered with modifying any of these files.
Instead, there are only two changes you need to make to the code of "demo.htm" to integrate the
color picker into your page:
1) Locate the code:
ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value
from "colorfield1"
ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value
from "colorfield1"
These two lines are used to prefill the color boxes to the right of the form fields in question
with the color currently inside the field when the page first loads. Without this code, when
your page loads, the color boxes will not be initially filled with the color values inside the
form fields.
There are two fields in the demo, hence two lines. The first parameter of fillcolorbox(),
"colorfield1", should be the ID of the form field, while the second parameter, the ID of the
matching color box. See below for more information.
2) Locate the code:
This code demonstrates how to integrate the color picker with any form field on your page. The
key is the add the code:
onFocus="ddcolorposter.echocolor(this, 'colorbox1')"
inside the desired form fields, where "colorbox1" is the ID of color box. That's it!
You may be interested in - HTML special codes
