пятница, 9 января 2009 г.

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

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.

0 Комментариев :

Отправить комментарий

Жги!