Довольно часто попадаются задачи, когда в интерфейс страницы нужно включить инструмент выбора цвета. С этой задачей превосходно справляется jQuery plug-in Farbtastic color picker.
Что и с чем?
1. Плагин использует HSL пространство цветов, что позволяет легко изменять яркость цвета не меняя его насыщенности.
2. Занимает 23KB, включая изображения и CSS.
Лежит здесь jQuery color picker
Как использовать?
1. Включаем farbtastic.js и farbtastic.css в наш HTML:
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />
2. Добавляем два объекта
поле
<input type=»text» id=»color» name=»color» value=»#123456″ />
куда будет заноситься значение полученное в результате применения, и контейнер
<div id="colorpicker"></div>
для интерфейса
3. Добавляем обработчик срабатывающий при загрузке страницы
<script type="text/javascript">
$(document).ready(function() {
$('#colorpicker').farbtastic('#color');
});
</script>
Возможности использования.
$(...).farbtastic(callback);
callback — функция которая быдет вызываться каждый раз когда пользователь будет выбирать цвет.
$.farbtastic(placeholder)
$.farbtastic(placeholder, callback)
Возвращает объект (который не является jQuery объектом !) позволяющий использовать некоторые дополнительные методы и свойства.
Методы
.linkTo(callback) — переопределение нового ответчика.
.setColor(string) . — устанавливает colorpicker на параметры заданного цвета в шестнадцатеричном представлении (например, ‘# 123456′).
.setColor ([H, S, L]) — станавливает colorpicker на параметры заданного цвета в HSL цветовом пространстве (0 .. 1 шкала).
Свойства
.linked . — установка связи с элементом (jQuery объектом) или заданной функцией .
.color — установка текущего цвета в шестнадцатеричном представлении (например, ‘# 123456′).
.hsl — установка текущего цвета в HSL представлении (например, [0.3, 0.4, 0.5]).
Тэги: colorpicker, jQuery, plugin