Простой JQuery плагин, позволяющий реализовать наглядную возможность выбора цвета в режиме реального времени. Запоминает последние 10 выбранных цветов и хранит их в специальной удобной панельке для быстрого доступа к ним.
Установка
1. Необходимо подключить библиотеку JQuery и, собственно, сам плагин, который доступен для скачивания в архиве с исходными кодами.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="javascripts/mColorPicker.js"></script>
2. В файле mColorPicker.js, возможно, придется указать путь к папке, где хранятся необходимые для плагина изображения. Этот путь прописывается в строке imageFolder: 'images/',
3. Теперь, в теле HTML кода, разместите поле INPUT типа color:
Пример 1
<input type="color" />
Пример 2
Значение параметра value для тега input, определяет начальный цвет поля:
<input type="color" value="#ff0667"/>
Пример 3
Установите параметр data-hex="true", для отображения кода выбранного цвета в шестнадцатеричном формате:
<input type="color" value="#ff0667" data-hex="true" />
Пример 4
Если вы определите параметр data-text="hidden", - текст внутри текстового поля и кружок выбора цвета отображаться не будет. Вместо этого элемент INPUT станет кликабельным, и клик по нему откроет меню выбора цвета. Установите, с помощью стилей CSS, высоту и ширину элемента INPUT для задания размеров кликабельного поля:
<input type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />
Пример 5
Добавьте обработку события "colorpicked", которое вызывается когда пользователь выбрал цвет:
<input id="color_5" type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />
<script type="text/javascript">
$(document).ready(function () {
$('#color_5').bind('colorpicked', function () {
alert($(this).val());
});
});
</script>
Этот плагин может быть полезен на форумах, интернет конференциях, в чатах или в формах комментирования последних новостей политики и бизнеса. Очень часто активно обсуждаются новинки программного обеспечения и софта для успешного ведения бизнеса (например, программы 1с зарплата и кадры), новости кино и телевидения, скандальные заявления политиков и многое другое. Везде, где есть потребность в организации активного общения пользователей, этот плагин станет незаменимым помощником для WEB-мастера.