Вибіралка квітів 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 - елемент. параметри:

  1. HTMLElement element - Вузол DOM - древа, в який потрібно помістити Color Picker
  2. string name - ім'я елемента форми, який буде представляти обраний колір *
  3. string selected - рядок типу "# FFCC00" - колір пікера за замовчуванням
  4. int offsX - зміщення координат палітри (прав. верх. кут) щодо кліка мишки по горизонталі
  5. 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 Ось власне і все.

Сподіваюся пояснив доступно, файли скрипта ви можете завантажити за посиланням на початку статті, але до купи привожу лістинг скрипта - як завжди намагався простіше і коротше якщо будуть питання пишіть.

Color Picker лістинг

Схожі статті