Оформление в jQuery UI

Материал из JQuery

Перейти к: навигация, поиск

Все плагины jQuery UI спроектированы так, чтобы UI-виджеты можно было подстраивать под особенности оформления и работы большинства сайтов. Оформление каждого виджета описано с помощью CSS и содержит два уровня правил оформления: базовые стили CSS-фреймворка и специфические стили, описывающие правила выбранной темы оформления.

jQuery UI CSS-фреймворк обладает набором правил для названия классов, присваиваемых элементам, участвующим в работе виджета. Эти правила позволяют легко находить требуемые части виджета, как например заголовок, содержимое или кликабельная зона. Так же, эти правила действуют для всех плагинов UI, поэтому, к примеру, кликабельные зоны будет обладать одним и тем же классом - ui-state-default, как у UI-кнопок, так и у UI-аккордеона. Если пользователь наведет на элемент с таким классом курсор, то класс будет автоматически изменен на ui-state-hover, а если кликнет по нему, то элемент изменит этот класс на ui-state-active. Этот и многие другие принципы классификации UI-элементов помогают разработчикам работать с UI-плагинами в максимально просто и понятно.

Все стили jQuery UI CSS-фреймворка находятся в одном файле — ui.theme.css, изменения в котором можно производить в визуальном-онлайн редакторе ThemeRoller. Все правила в этом файле отвечают только за визуальное оформление элементов плагинов (цвета, фон элементов, иконки). Такое разделение гарантирует безопасное редактирование стилей, которое в дальнейшем не скажется на работе плагинов при обновлении UI. Структурные правила оформления элементов (размеры, отступы, позиционирование, float) расположены в отдельных файлах (обычно с именем, типа jquery.ui.accordion.css). Их стоит менять с большой осторожностью — они участвуют в логике поведения плагинов и при обновлении jQuery UI это может нарушить их нормальную работу.

Содержание

Введение

Вносить изменения в оформление jQuery UI плагинов можно на трех различных уровнях:

  • Воспользоваться визуальным редактором ThemeRoller. И это наиболее простой из способов. Вы просто вносите необходимые изменения и загружаете файл со стилями (ui.theme.css) и необходимыми картинками оформления. Однако это средство наименее гибкое, поскольку ограничено возможностями ThemeRoller.
  • Вносить изменения в css вручную. Чтобы получить больший контроль над тем, как оформлены элементы, участвующие в работе плагина, можно в начале сконфигурировать тему с помощью ThemeRoller, а затем внести необходимые изменения в полученный ui.theme.css файл или в один из css-файлов конкретного плагина (последнее, как уже было описано, не рекомендуется). Так например, вы можете задать радиус углов у кнопок, отличный от радиуса у других компонентов или изменить путь к спрайту картинок плагина.
  • Сделать css-файл "с нуля". Если необходимо кардинально изменить внешний вид элементов плагина, то вполне возможно, лучшим вариантом будет создать его самостоятельно, "с нуля". Однако, это требует хорошего понимания html и css структуры UI-плагинов, а так же хороших знаний в области css.

Советы по созданию собственных UI css-правил

  • Имя классов начинайте с указания пространства имен ui-
  • Конкретизируя группу элементов, предворяйте имя их классов пространством имен менее конкретной группы. Например, класс диалогового окна является виджетом (более обширная группа), поэтому их класс имеет вид .ui-widget-dialog.
  • Не создавайте глобальные стили
  • Не используйте id для стилизации (только для поиска элементов)
  • Не используйте заглавные буквы
  • Используйте дефис, а не подчеркивания для разделения слов в именах классов

jQuery UI CSS Framework

Следующие css-классы находятся в ui.core.css и ui.theme.css, в зависимости от того, за что они отвечают: расположение и структуру элементов или их оформление (цвет, фон, иконки) соответственно. Эти классы общие для всех UI-элементов, что обеспечивает единый стиль их оформления.

Вспомогательные элементы (helper'ы)

В некоторых плагинах используются вспомогательные элементы. Например, в плагине, делающим элементы перетаскиваемыми, в течении перетаскивания, оригинал может быть заменен на вспомогательный элемент (в зависимости от настроек).

.ui-helper-hidden — элемент скрыт (его css-свойство display будет равно true).
.ui-helper-hidden-accessible — элемент скрыт но доступен на странице (для такого скрытия элемент убирается за пределы страницы, обычно на 10000 пикселей влево).
.ui-helper-reset — этот класс присваивается вспомогательным элементам, у которых временно сбросили базовые UI css-правила. Такие как: padding, margin, text-decoration, list-style и т. д.
.ui-helper-clearfix — этот класс присваивается "плавающим" (в смысле css-свойства float) элементам, к которым были применены меры, чтобы их родительские элементы могли их оборачивать.
.ui-helper-zfix — Applies iframe "fix" css to iframe elements when needed in overlays.

Контейнеры виджетов

.ui-widget — Этот класс присваивается основному (внешнему) html-элементу, отвечающему за виджет. Обычно, для этого класса прописывают шрифтовые параметры виджета, поскольку они будут распространяться на него всего.
.ui-widget-header — устанавливается элементу, который отвечает за область заголовка виджета.
.ui-widget-content — устанавливается элементу, который отвечает за область содержимого виджета.
.ui-widget-content — устанавливается элементу, который отвечает за область содержимого виджета.

Состояния кликабельных элементов

.ui-state-default — устанавливается "кнопкоподобным" кликабельным элементам.
.ui-state-hover — устанавливается "кнопкоподобным" элементам, над которыми в настоящий момент находится курсор.
.ui-state-focus — устанавливается "кнопкоподобным" элементам, которые находятся в фокусе в настоящий момент.
.ui-state-active — устанавливается "кнопкоподобным" элементам, нажатым в настоящий момент.

Interaction Cues

.ui-state-highlight — этот класс присваивается подсвеченным или выбранным элементам.
.ui-state-error — этот класс присваивается элементам с сообщением об ошибке.
.ui-state-error-text — дополнительный класс, который присваивается элементам, в которых только текст будет стилизован под сообщение об ошибке, а фон нет. Это актуально например label-элементов в формах.
.ui-state-disabled — класс неактивного элемента. Такой элемент не выполняет своего функционального назначения. Внешне он приглушается с помощью частичной прозрачности.
.ui-priority-primary — если необходима иерархия кнопок, то такой класс присваивается элементам верхней иерархии (priority-1). Такие кнопки имеют жирный текст.
.ui-priority-secondary — если необходима иерархия кнопок, то такой класс присваивается элементам второго уровня иерархии (priority-2). Такие кнопки имеют нежирный текст и небольшую прозрачность.

Иконки

.ui-icon — это базовый класс, который присваивается всем элементам с иконками jQuery UI. Таким элементам прописываются следующие css-правила: это 16-ти пиксельные квадратные элементы без текста, с фоном с заданной иконкой (берется из большого спрайта, идущего с jQuery UI). Нужно отметить, что вид иконок у элементов с классом ui-icon может варьироваться, в зависимости от их родительских элементов. Например, ui-icon элемент, лежащий внутри ui-state-default будет иметь цвет, прописанный специально для иконок лежащих в ui-state-default.
.ui-icon-{icon type}-{icon sub description}-{direction} — после указания класса ui-icon, можно указать второй класс, который определит тип отображаемой иконки. Например класс ui-icon-triangle-1-e задаст иконку с треугольным указателем, направленным вправо. Все возможные варианты иконок можно найти на странице с Themeroller (наводя курсор на каждую из них, будет показываться имя соответствующего класса).

Остальное

.ui-corner-tl — присваивается элементу, с помощью которого выполняется скругление верхнего левого угла.
.ui-corner-tr — присваивается элементу, с помощью которого выполняется скругление верхнего правого угла.
.ui-corner-bl — присваивается элементу, с помощью которого выполняется скругление нижнего левого угла.
.ui-corner-br — присваивается элементу, с помощью которого выполняется скругление нижнего правого угла.
.ui-corner-top — присваивается элементу, с помощью которого выполняется скругление верхних углов.
.ui-corner-bottom — присваивается элементу, с помощью которого выполняется скругление нижних углов.
.ui-corner-right — присваивается элементу, с помощью которого выполняется скругление правых углов.
.ui-corner-left — присваивается элементу, с помощью которого выполняется скругление левых углов.
.ui-corner-all — присваивается элементу, с помощью которого выполняется скругление всех углов.


.ui-widget-overlay — этот класс присваивается элементу, которому необходимо перекрыть весь экран (например для модального окна). За этим классом закрепляются css-правила, задающие ширину, высоту, фон (иногда с картинкой) и уровень прозрачности.
.ui-widget-shadow — применяется к элементу, который должен организовывать эффект тени для другого элемента (он находится внутри первого). За этим классом закрепляются css-правила, задающие фон/текстуру, радиус скругления углов, прозрачность, верхний и левый отступ и "толщина" тени. Толщина задается параметром padding, а отступ с помощью margin-left и margin-top (могут быть отрицательными).