Color Picker для веб-приложений

Когда-то давным-давно в застенках Adobe изобрели простой и удобный интерфейс инструмента, выбирающего цвета из палитры. Интерфейс получился настолько удачным, что почти без изменений пережил множество версий Photoshop и другого ПО этого производителя. Кроме того, он превратился в «народное достояние» и стал использоваться сторонними разработчиками, как решение де-факто.

Одной из значимых характеристик интерфейса любого правильного приложения является неспособность «удивлять» пользователя, ставя его перед необходимостью думать не только о выполняемой работе, но и об инструменте. Это одно из обоснований унификации UI и применения общепринятых решений (конечно, не стоит интерпретировать такое утверждение, как пропаганду консерватизма и унылого ретроградства, просто любое решение, в том числе отклонение от стандартов, должно быть осмыслено и обосновано).

Описанные выше доводы, по всей видимости, стали одной из причин реализации photoshop-style color picker для веб-приложений. И не просто какой-то отдельно взятой реализации, а целой толпы JavaScript-аналогов.

Один из хороших примеров CP сделан на основе уже упоминавшейся раньше библиотеки Mootools. Окошко с палитрой появляется прямо внутри страницы:

На странице проекта продемонстрированы разные варианты внедрения color picker-а. Например, еще есть вот такой миниатюрный:

Вариант на базе Mootools ине понравился больше других, но если кому-то противит использование JS-фреймворков (по религиозным причинам или по причине 90 килобайт, на которые несжатый MT утяжеляет первую загрузку), можно отдать предпочтение «независимому» скрипту.

Один из них отличается тем, что появляется в виде отдельного popup окна и имеет дополнительную возможность ограничения выбора только из палитры безопасных цветов:

А другой — тем, что дружит не только с цветовой моделью RGB, но и HSB:

Ссылки по теме

• «How to Create a Color Picker in JavaScript» by Mark Kahn — большое и подробное описание того, как написать color picker самостоятельно.
• Mootools — упомянутый выше фреймворк Mootools, предназначение которого отнюдь не ограничено описанным в данной заметке применением.
• Yahoo! UI Library: Color Picker Control — еще одно заслуживающее и внимание решение с поддержкой RGB и HSV.

PS: А вы знаете, что Миша Квакин бесплатно рисует всем желающим прикольные оранжевые иконы для RSS-фидов? RSS-кружка, в левом верхнем углу этой страницы — его творчество (она видна, если вы читаете заметку на сайте, а не в каком-нибудь Гуглридере). И если он нарисует для меня за этот анонс что-то совсем бесподобно-потярсающее, буду ему премного благодарен. Кстати, да, это был неприкрытый PR.

Написать комментарий