ColorPicker - инструмент для выбора цвета

Этот JavaScript-компонент предоставляет простой и удобный инструмент для выбора HSV цвета.

Как добавить ColorPicker

1. включите файлы javascript в секции HEAD
2. добавьте ссылку на файл стилей colorpicker.css в секции HEAD
3. добавьте поле input для хранения/отправки 16-ричного значения цвета (без ведущего #)
4. инициализируйте ColorPicker

<script type="text/javascript">
  new Control.ColorPicker("colorFieldName");
</script>

Внимание: Не вызывайте "new Control.ColorPicker()" пока не закроете все окружающие форму (form) блочные элементы (напр. div). В противном случае это вызовет ошибку IE Operation Aborted в IE 6/7. Вместо этого используйте:

Event.observe(window, "load", function() { 
  new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" })
});

Этот способ в «чистом» виде непригоден для AJAX-методов, поэтому рекомендую вынести его в отдельную функцию, которую вызывать каждый раз, когда аяксовый метод отработал.

яваскрипт (javascript)

<script type="text/javascript">
//<![CDATA[
function activateColorPicker(){
  cp_Label = new Control.ColorPicker("label_color", { "swatch" : "inside_color1" });
}
// first time Run (for IE)
Event.observe(window, "load", function() { 
  activateColorPicker();
});
//]]>
</script>

ajax_delete_label.rjs : Пример вызова функции для Ruby on Rails.

page.replace_html 'labels_container', :partial => 'custom_labels'
page.call 'activateColorPicker'

Скачать ColorPicker можно с его страницы в Google Code: colorpickerjs.