Палитра цветов на jQuery


На заметку, полезный плагин для jQuery - Color Picker.
Иногда бывают случаи, когда на страничке пользователю нужно предоставить выбор цвета. Для этого хорошие люди написали плагин для jQuery - Color Picker, который, по принципу выбора цвета, похож на цветовую палитру в Photoshop и к которой все так привыкли!

Подключаем jQuery и плагин со стилями:

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/colorpicker.js" type="text/javascript"></script>

Скрипт:

$(document).ready(function(){

$('#colorpickerHolder').ColorPicker({flat: true});

$('#colorpickerField').ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$('#colorpickerField').val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});

$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}

});

Строка 02 – обычный вызов палитры в DIV контейнере.
Строка 03-13 – привязка к элементу input по id c обработчиками для задания выбранного цвета с value.
Строка 14-26 – вывод в контейнере DIV c эффектами onHide и onShow

HTML:

<div id="colorpickerHolder"></div>

<input id="colorpickerField" type="text" value="00ff00" />

<div id="colorSelector"></div>

Для корректной работы в IE предлагаю подключать плагин прозрачности png файлов для jQuery (о нем чуть позже).

Посмотреть пример работы палитры цветов.

Скачать пример.

, , ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 5, в среднем: 4.20 из 5)
Loading ... Loading ...


  1. #1 Олег - Февраль 8th, 2010 at 10:16

    Охуенчик, как раз то, что нужно.

  2. #2 Ice_man - Май 18th, 2010 at 16:59

    Спасибо, нашел именно то, что искал)

  3. #3 Серж - Декабрь 28th, 2010 at 14:43

    В IE не работает

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.