Выбиралка цветов Color Picker
В этой заметке я хочу представить ещё одно своё JavaScript творение: Color Picker - выбиралку цветов. Скрипт довольно простой по функционалу и установке, ну, и впринципе код у него тоже не очень сложный. Он НЕ использует JQuery и картинки, небольшой по размеру, и довольно прост и быстр. Работает в IE 6-9, Opera, FireFox, Safari, Chrom.
Color Picker по - умолчанию генерирует палитру из 216 безопасных web ветов, и имеет определённый CSS стилями вид, но вид и содержимое палитры можно настраивать. Ниже пара примеров на что он способен.
Скрипт обновлен до версии 1.2 (добавлена кнопка закрытия палитры), но листинги остались старыми. Новая версия только в архиве.
Архив скрипта с примерами можно скачать тут:
colorPicker.v1.1 (Исходная версия)
colorPicker.v1.2 (Добавлена кнопка, закрывающая палитру)
Введу некоторые определения, что бы мне было проще вам объяснять:
- Палитра
-
Собственно сама палитра, содержащая образцы цветов
- Образец
-
Элемент палитры, при клике на котором выбирается цвет.
- Пикер
-
Это квадратик с цветом, который видит пользователь, и на который ему нужно кликнуть, что бы появилась палитра цветов.
Color Picker интеграция
Пользоваться скриптом довольно просто. Color Picker - имеет всего три доступных метода (показано с указанием типа данных):
- ColorPicker.insertInto( HTMLElement element, string name, string selected, int offsX, int offsY)
-
Основной метод - вставляет Color Picker в указанный html - элемент. Параметры:
- HTMLElement element - Узел DOM - древа, в который нужно поместить Color Picker
- string name - имя элемента формы, который будет представлять выбранный цвет*
- string selected - строка типа "#FFCC00" - цвет пикера по-умолчанию
- int offsX - смещение координат палитры (прав. верх. угол) относительно клика мышки по горизонтали
- int offsY - смещение координат палитры (прав. верх. угол) относительно клика мышки по вертикали
* - Color Picker сам создаёт скрытый элемент INPUT и помещает его в DOM перед пикером. Если вы не зададите имя явно - скрипт попытается установить имя скрытого элемента INPUT такое же, как id - элемента, указанного в первом параметре.
// Добавляем на страницу: ColorPicker.insertInto( document.getElementById("color_picker_two"), "base_color", "#0000ff", 10, 15 );
- ColorPicker.setPallete( array arrayOfColors )
-
Позволяет установить свою палитру цветов. Принимает параметр - массив, например:
ColorPicker.setPallete(["#FFFFFF","#FFCC00","#00FFCC","#0000FF","#00CCFF","#CC00FF"]);
- ColorPicker.setClasses( string picker, string palette, string colorItem )
-
Позволяет указать свои имёна классов стилей для пикера, палитры, и образцов цветов например:
ColorPicker.setColors("col-safe-picker","col-safe-palette","col-safe-item");
Это потребуется тогда, когда вы захотите задать свою палитру цветов или изменить внешний вид стандарных.
Color Picker пример использования
Певрое, что нужно это форма - в два её элемента мы вставим Color Picker-ы:
<form method="get" action=""> <p><label>Безопасные WEB цвета: <span id="color_picker_one"></span></label></p> <p><label>Базовые WEB цвета + град. серого: <span id="color_picker_two"></span></label></p> <p><button type="submit">Отправить</button></p> </form>
Подключаем основной файл Color Picker - а
<script type="text/javascript" src="colorPicker.v1.1.js"></script>
Далее устанавливаем два элемента для выбора цвета - один из них будет с нестандарной палитрой:
<script type="text/javascript"> // Безопасные web цвета (стандарнт.), добавляем на страницу: ColorPicker.insertInto( document.getElementById("color_picker_one"), "safe_color", "#ff0000" ); // Базовые web цвета + град. серого: ColorPicker.setPallete(["#BE2137","#FFA100","#00752C","#0052AC","#701F85", "#E62937","#FFCB00","#009E2F","#0079F1","#873CBE", "#FF7525","#FDF900","#00E430","#00A9FF","#C87AFF", "#FFFFFF","#999999","#666666","#333333","#000000"]); // Так как цветов меньше палитра будет иметь иной внешний вид - нужно скорректировать стили: ColorPicker.setClasses("col-safe-picker","col-safe-palette","col-safe-item"); // Добавляем на страницу: ColorPicker.insertInto( document.getElementById("color_picker_two"), "base_color", "#0000ff", 5, 5 ); </script>
Добавим стили для стандарной палитры:
<style type+"text/css"> /* Безопасные цвета */ .col-pic-item{float:left;width:15px;height:15px;border:solid 1px #FFF;margin:0px} .col-pic-item:hover{border:solid 1px #00FF00} .col-pic-picker{width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;} .col-pic-palette{width:306px;border:solid 2px #666}
В JS - листинге выше, в строке 5 мы установили свою палитру, а она имеет меньше цветов чем стандарная, поэтому в строке 10, там же, мы указали новые классы стилей - определим их:
/* Базовые цвета */ .col-safe-item{float:left;width:40px;height:40px;border:solid 1px #FFF;margin:0px} .col-safe-item:hover{border:solid 1px #00FF00} .col-safe-picker{width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;} .col-safe-palette{width:210px;border:solid 2px #666} </style>
По сути для Color Picker нужно всего три класса: для самого пикера, для палитры и для образцов. Для выразительности, для образцов цвета мы добавили ещё один псевдокласс ... :hover Вот собственно и всё.
Надеюсь объяснил доступно, файлы скрипта вы можете скачать по ссылке в начале статьи, но до кучи привожу листинг скрипта - как всегда старался проще и корочеесли будут вопросы пишите.
Color Picker листинг
var ColorPicker = (function (GLOB) { "use strict"; var DOC = GLOB.document, pickerClass = "col-pic-picker", paletteClass = "col-pic-palette", colorItemClass = "col-pic-item", PALETTE = [], // Создаёт DOM-элемент для образца цвета getColorItem = function (clickHandler) { var colDiv = DOC.createElement("DIV"); colDiv.className = colorItemClass; colDiv.onclick = clickHandler; return colDiv; }, // Получить прокрутку страницы: pageScroll = function() { return { y: GLOB.pageYOffset || DOC.documentElement.scrollTop || DOC.body.scrollTop, x: GLOB.pageXOffset || DOC.documentElement.scrollLeft || DOC.body.scrollLeft } }, // Формирование палитры цветов ( используются 216 Safe Web Colors ) // Эта ф-ция не доступна из вне. createPalette = function (srcPicker, srcInput) { var palette = DOC.createElement("DIV"), length = PALETTE.length, hexR = "", hexG = "", hexB = "", colItem = null, i, q, m, // Обработчик кликов на образцах: clickHandler = function () { srcPicker.style.background = this.style.background; srcInput.value = this.hv; palette.style.display = "none"; }, // Добавляет образец цвета в палитру: addColor = function ( color ) { colItem = getColorItem(clickHandler); colItem.style.background = colItem.hv = color; palette.appendChild(colItem); }; // Если пользователь не задал свою палитру: if (length === 0) { // Генерим палитру Safe Web Colors: for (i = 0x0; i <= 0xff; i += 0x33) { hexR = (i > 0) ? i.toString(16) : "00"; for (q = 0x0; q <= 0xff; q += 0x33) { hexG = (q > 0) ? q.toString(16) : "00"; for (m = 0x0; m <= 0xff; m += 0x33) { hexB = (m > 0) ? m.toString(16) : "00"; addColor("#" + hexR + hexB + hexG); } } } // Иначе, если пользователь ввёл свой массив цветов - выводим его: } else { for (i = 0; i < length; i += 1) { addColor(PALETTE[i]); } } // Конфиг палитры: palette.className = paletteClass; palette.style.display = "none"; palette.style.position = "absolute"; // Добавляем в DOM DOC.body.appendChild(palette); return palette; }; return { /** * Установка имён классов стилей. * @param string picker - Имя класса для значка выбора цвета, по-умолчанию: "col-pic-picker". * @param string palette - Имя класса для появляющейся палитры, по-умолчанию: "col-pic-palette". * @param string colorItem - Имя класса элементов - образцов цвета в палитре, для по-умолчанию: "col-pic-item". * @return ColorPicker */ setClasses : function (picker, palette, colorItem) { pickerClass = picker; paletteClass = palette; colorItemClass = colorItem; return this; }, /** * Установка своей палитры цветов. * @param array arrayOfColors - массив HEX-значений цветов. * @return ColorPicker */ setPallete : function (arrayOfColors) { PALETTE = arrayOfColors; return this; }, /** * Вставить выбиралку цвета в HTMLElement * @param HTMLElement element - элемент, результат выборки: document.getElementById * @param string name - атрибут для элемента формы, представляющего выбранный цвет. * @param string selected - значение по-умолчанию для элемента формы, представляющего выбранный цвет. * @param int offsX - смещение палитры относительно эемента выбора цвета по горизонтали * @param int offsY - смещение палитры относительно эемента выбора цвета по вертикали * @return ColorPicker */ insertInto : function (element, name, selected, offsX, offsY) { var picker = DOC.createElement("DIV"), hideInput = DOC.createElement("INPUT"), palette = createPalette(picker, hideInput), oX = offsX || 1, oY = offsY || 1; // Скрытый элемент формы, значение которого // будет меняться, в зависимости от выбора цвета // и которое будет передаваться на сервер. hideInput.value = picker.style.background = selected; hideInput.type = "hidden"; hideInput.name = name || element.id; picker.className = pickerClass; // Обработчик клика на элементе - пикере picker.onclick = function (ev) { var e = ev || GLOB.event, x = e.clientX, y = e.clientY; palette.style.display = "block"; palette.style.top = (y + pageScroll().y) - oY + "px"; palette.style.left = (x + pageScroll().x) + oX + "px"; }; // Добавляем в DOM element.appendChild(picker); element.insertBefore(hideInput, picker); return this; } }; }(this));
Мастера эротического массажа
Умелые мастера эротического массажа сделают ваш вечер незабываем в салоне Империя СПА.
espa.site
Нержавеющие трубы 12х18н10т 720
Купить профильные нержавеющие трубы 12х18н10т 720 оптом и в розницу не дорого.
transsibmetall.ru
Добавить комментарий
Информация копипастерам
Внимание! Копирование контента с сайта, возможно только с разрешения администратора. Т.е. Меня! Я скорее всего разрешу Вам это сделать, в обмен на живую ссылку, на статью оригинал.