РАЗРАБОТКА COLOR PICKER ПРИ ПОМОЩИ HTML, CSS И JQUERY

COLOR PICKER DEVELOPMENT WITH HTML, CSS AND JQUERY

Bakhtiyar Imanaliyev

student, Department of Information Technologies, Toraighyrov University,

Kazakhstan, Pavlodar

Nazira Ospanova

candidate of Pedagogical Sciences, associate professor, Toraighyrov University,

Kazakhstan, Pavlodar

АННОТАЦИЯ

В данной статье будут рассмотрены процесс разработки color picker при помощи HTML, CSS и JQuery.

ABSTRACT

This article will walk you through the process of developing a color picker using HTML, CSS, and JQuery.

Ключевые слова: color picker, html, css, jquery.

Keywords: color picker, html, css, jquery.

Что такое color picker, HTML, CSS и JQuery.

ColorPicker представляет собой поле для предпросмотра и выбора цвета. Компонент возвращает шестнадцатеричный (HEX) код цвета в виде строки.

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки веб-страниц во Всемирной паутине. Код HTML интерпретируется браузерами; полученная в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства [1].

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки [2]. [2].

jQuery — набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Разработка jQuery ведётся командой добровольцев на пожертвования [3].

Разработка элементов color picker при помощи HTML и CSS.

Color picker (рисунок 1) состоит из трех главных элементов - поле выбора оттенка, поле выбора цвета и поле вывода выбранного цвета.

Рисунок 1. Color picker.

1 – поле выбора оттенка; 2 – поле выбора цвета; 3- поле вывода выбранного цвета.

Создание поля выбора оттенка.

В свою очередь поле выбора оттенка (рисунок 2) включает в себя такие элементы – курсор и поле градиента.

Рисунок 2. Поле выбора оттенка

1 – градиентное поле; 2 – курсор выбора оттенка.

Для создания такой конструкции, необходимо создать родительский div элемент с классом «color-picker» - это обертка поля выбора оттенка. Внутри этого элемента нужно создать div с классом «cursor» - это курсор. А также div с классом «color-picker-body» - это тело обертки градиента.

Внутри элемента с классом «color-picker-body» нужно создать div с классом «color-picker-body-inner», а внутри этого элемента нужно создать div с классом «color-picker-body-inner2». В общем должна получиться конструкция, показанная на рисунке 3.

Рисунок 3. Html конструкция поля выбора оттенка

После создания данной конструкции необходимо стилизовать элементы данного поля.

Первым делом необходимо стилизовать верхний div с классом «color-picker». Для элемента задается ширина, высота, граница и позиция (рисунок 4).

Рисунок 4. Стили для элемента «color-picker»

Далее стилизуем курсор, классом которого является – «cursor» (рисунок 5).

Рисунок 5. Стили для элемента «cursor»

Теперь необходимо задать градиент элементу поля выбора оттенка. Сделать это можно при помощи наложения двух элементов с различными градиентами друг на друга, именно для этого внутри элемента «color-picker-body» были созданы два дополнительных элемента. Для элемента «color-picker-body» задается высота и ширина в размере 100%, позиция, цвет заднего фона, а также дополнительные стили (рисунок 6).

Рисунок 6. Стили для элемента «color-picker-body»

Далее создадим тот самый градиент для поля выбора оттенка. Для этого необходимо прописать стили для элемента «color-picker-body-inner» (рисунок 7) и стили для элемента «color-picker-body-inner2» (рисунок 8).

Рисунок 7. Стили для элемента «color-picker-body-inner»

Рисунок 8. Стили для элемента «color-picker-body-inner2»

Создание поля выбора цвета.

В данном случае html конструкция будет значительно проще и будет включать в себя родительский div с классом «color-picker-line» - элемент выбора цвета и div с классом «color-picker-line-cursor» - курсор для данного элемента (рисунок 9).

Рисунок 9. Html конструкция поля выбора цвета

Стилизуется родительский элемент (Рисунок 10).

Рисунок 10. Стили для элемента «color-picker-line»

Стилизуется курсор для этого элемента (Рисунок 11).

Рисунок 11 Стили для элемента «color-picker-line-cursor»

Создание поля вывода выбранного цвета.

Для создания данного поля нужно всего лишь создать один div элемента с классом «color-picker-result» и стилизовать его (рисунок 12).

Рисунок 12 – стили для элемента «color-picker-result»

Программирование поля выбора оттенка color-picker при помощи JQuery.

Для работы с JQuery необходимо подключить библиотеку JQuery. Есть два варианта подключения: 1 – скачать библиотеку и подключить ее локально, 2 – подключить при помощи CDN (при помощи ссылки, куда уже загружена библиотека).

Рисунок 13. Подключение библиотеки JQuery при помощи CDN

Необходимо создать переменные для функций перемещения курсора и получения координат курсора относительно поля выбора оттенка.

Рисунок 14. Переменные для функций перемещения курсора и получения координат курсора

Pagex, pagey – переменные в которые записываются положения курсора внутри поля выбора оттенка относительно оси x и y; offsetLeft, offsetTop – переменные в которые записывается позиции поля выбора оттенка в окне браузера относительно левого края и верхнего края; clientHeight, clientWidth – переменные в которые записываются ширина и высота color picker; cursor – включает в себя высоту и ширину курсора; border – толщина обводки поля выбора оттенка.

Далее нужно прописать функции получения координат (рисунок 15 и 16) и функции изменения положения курсора (рисунок 17 и 18).

Рисунок 15. Функция получения координаты x внутри блока color picker

Рисунок 16. Функция получения координаты y внутри блока color picker

Рисунок 17. Функция изменения положения курсора по полученному значению x внутри color picker

Рисунок 18. Функция изменения положения курсора по полученному значению y внутри color picker

Для того чтобы получить цвет в rgb (red, green, blue) формате, сначала нужно получить цвет в формате hsv. Для этого необходимо создать переменные для хранения данных величин.

Рисунок 19. Переменные для конвертации цвета из hsv в rgb

hue – тон; saturation – насыщенность; value – значение; regRgb – полученный цвет в формате rgb.

Для получения saturation создается функция getSaturation (рисунок 20), а для получения value создается функция getValue (рисунок 21).

Hue будет браться из значения получаемого из поля выбора цвета и для этого будет служить функция getHue, ей будет уделено время позже, когда речь будет идти о поле выбора цвета.

Рисунок 20. Функция getSaturation

Рисунок 21. Функция getValue

На рисунке 19 видно, что переменная hue имеет значение 360. По шкале hsv, значение h = 360 имеет красный цвет, это стандартное положение color picker, поэтому уже на данной стадии можно получить оттенки красного цвета используя функцию getColor (рисунок 22).

Рисунок 22. Функция getColor

Что же делает функция getColor?

Эта функция берет значения hue, saturation, value и при помощи описанной на рисунке формулы переводит их в шкалу rgb. Благодаря данной функции получается цвет, который можно вывести и получить. То зачем и создается color picker. Остается только привязать все функции к действию нажатия и перемещения курсора внутри поля выбора оттенка и вывести полученный цвет в элементе вывода цвета (рисунок 23, 24, 25 и 26).

Рисунок 23. Функции запуска функций изменения положения курсора по оси x и y, вывода цвета у элемента вывода и функция, запускающая две вышеуказанные функции

Рисунок 24. Функцию остановки изменения положения курсора. Срабатывает, когда отпускается левая кнопка мыши

Рисунок 25. Функция, которая включает все вышеуказанные функции в одну

Рисунок 26. При нажатии в поле выбора оттенка срабатывает функция cursorAllFunctions

Программирование поля выбора оттенка color-picker при помощи JQuery.

Как упоминалось выше, значение hue по стандарту определено как 360. Поле выбора оттенка имеет назначение изменять цвет, а в шкале hsv, h как раз и отвечает за цвет. Hue может принимать значение от 0 до 360. Значение 0 аналогично значению 360.

Исходя из вышесказанного, можно сделать вывод, что при изменении положения курсора внутри поля выбора цвета, будет менять значение hue. Соответственно функция getColor (получение цвета, рисунок 22) будет менять свое значение. То есть при помощи этих изменений и будет достигнута возможность выбора цвета и оттенка.

Для начала нужно создать функцию изменения положения курсора по оси Y внутри поля выбора цвета (рисунок 29) и функцию получения координаты курсора по оси Y (рисунок 28). Для этого создаются переменные (Рисунок 27).

Рисунок 27. Переменные для функций поля выбора цвета

PageyLine – переменная в которую записывается положения курсора внутри поля выбора цвета относительно оси y; offsetTopLine - переменная в которую записывается позиция поля выбора цвета в окне браузера относительно верхнего края; clientHeight, clientWidth – переменная в которую записывается высота поля выбора цвета; cursorLine – включает в себя высоту курсора; borderLine – толщина обводки поля выбора цвета.

Рисунок 28. Функция получения координаты курсора по оси Y

Рисунок 29. Функция изменения положения курсора по оси Y

Далее, исходя из получаемого значения координаты курсора по оси Y, производится изменение значения hue (рисунок 30).

Рисунок 30. Функция изменения и получения значения hue

Далее все функции собираются в одну, а также создается функция остановки изменения положения курсора по оси Y внутри поля выбора цвета (рисунок 31 и 32) и привязываются по клику к полю выбора цвета (рисунок 33).

Рисунок 31. Функции объединения остальных функций и функция остановки изменения положения курсора внутри поля выбора цвета

Рисунок 32. Функция, объединяющая все вышеуказанные функции

Рисунок 33. Привязка функции cursorAllFunctionsLine к полю выбора цвета. Активируется по нажатию внутри поля

Список литературы:

1. Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — П.: «Питер», 2010. — 656 с.
2. Дэвид Сойер Макфарланд. Новая большая книга CSS = CSS: The Missing Manual. — Санкт-Петербург: Питер, 2017. — 720 с.
3. Самков Г. jQuery. Сборник рецептов. — СПб.: БХВ-Петербург, 2010. — С. 416.