Довольно часто попадаются задачи, когда в интерфейс страницы нужно включить инструмент выбора цвета. С этой задачей превосходно справляется 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
