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.

«Резиновость» в рамках разумного

Как известно, для определения минимального и максимального значения размеров «резиновых» блоков в (X)HTML, предусмотрены свойства CSS max-width и max-height. Все браузеры уже года полтора правильно их интерпретируют. Кроме IE, разработчики которого по каким-то умным маркетинговым причинам клали болт на многие детали стандартов.

Тем не менее, возможность задавать предельные значения для масштабируемых блоков очень полезна. Например, для того чтобы «резиновая» верстка не теряла товарный вид при максимизации окна браузера на большом мониторе, заставляя пользователя читать полуметровые строки текста.

Раньше я решал этот вопрос с помощью JavaScript: небольшая функция автоматически корректировала ширину «резиновых» контейнеров при изменении размера окна браузера. Вчера был найден довольно более красивый способ заставить IE ограничивать масштабируемые блоки. Тоже на основе JS. Читать далее →