Вибіралка квітів color picker
Color Picker по - замовчуванням генерує палітру з 216 безпечних web Русе, і має певний CSS стилями вид, але вигляд і вміст палітри можна налаштовувати. Нижче пара прикладів на що він здатний.
Скрипт оновлено до версії 1.2 (додано кнопку закриття палітри), але листинги залишилися старими. Нова версія тільки в архіві.
Color Picker demo
Безпечні WEB кольору
Базові WEB кольору + град. сірого
Архів скрипта з прикладами можна скачати тут:
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.setPallete (array arrayOfColors)
Дозволяє встановити свою палітру кольорів. Приймає параметр - масив, наприклад:
ColorPicker.setClasses (string picker, string palette, string colorItem)
Дозволяє вказати свої імен класів стилів для пікера, палітри, і зразків квітів наприклад:
Це потрібно тоді, коли ви захочете поставити свою палітру кольорів або змінити зовнішній вигляд стандарних.
Color Picker приклад використання
Певром, що потрібно це форма - в два її елемента ми вставимо Color Picker-и:
Підключаємо основний файл Color Picker - а
Далі встановлюємо два елементи для вибору кольору - один з них буде з нестандарное палітрою:
Додамо стилі для стандартною палітри:
В JS - лістингу вище, в рядку 5 ми встановили свою палітру, а вона має менше квітів ніж стандартна, тому в рядку 10, там же, ми вказали нові класи стилів - визначимо їх:
По суті для Color Picker потрібно всього три класи: для самого пікера, для палітри і для зразків. Для виразності, для зразків кольору ми додали ще один псевдоклас. hover Ось власне і все.
Сподіваюся пояснив доступно, файли скрипта ви можете завантажити за посиланням на початку статті, але до купи привожу лістинг скрипта - як завжди намагався простіше і коротше якщо будуть питання пишіть.