CSS-фреймворк

Ниже приведен список имен классов, используемых jQuery UI. Классы предназначены для создания визуальной согласованности во всём приложении и позволяют темам компонентов настраиваться с помощью jQuery UI ThemeRoller. Имена классов разделены между ui.core.css и ui.theme.css в зависимости от того, являются ли стили фиксированными и структурными или настраиваемыми (цвета, шрифты, фоны и т. д.) соответственно.

Справочные элементы макета

• .ui-helper-hidden: Скрывает содержимое визуально и для средств вспомогательной технологии, таких как программы для чтения с экрана.
• .ui-helper-hidden-accessible: Скрывает содержимое визуально, но делает его доступным для средств вспомогательной технологии.
• .ui-helper-reset: Базовая настройка стилей для узлов DOM. Сбрасывает отступы, отступы, декорации текста, стили списков и т. д.
• .ui-helper-clearfix: Применяет свойства флотового обтекания к родительским элементам.
• .ui-front: Применяет z-индекс для управления стеком нескольких виджетов на экране. Более подробную информацию см. на странице о элементах стека.

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

• .ui-widget: Класс, который необходимо применить к внешнему контейнеру всех виджетов. Применяет семейство шрифтов и размер шрифта к виджетам.
• .ui-widget-header: Класс, который необходимо применить к контейнерам заголовков. Применяет стили контейнера заголовка к элементу и его дочерним текстам, ссылкам и иконкам.
• .ui-widget-content: Класс, который необходимо применить к контейнерам содержимого. Применяет стили контейнера содержимого к элементу и его дочерним текстам, ссылкам и иконкам. (может применяться к родителю или соседнему элементу заголовка).

Состояния взаимодействия

• .ui-state-default: Класс, который необходимо применить к нажимаемым элементам, похожим на кнопки. Применяет стили контейнера «нажатие по умолчанию» к элементу и его дочерним текстам, ссылкам и иконкам.
• .ui-state-hover: Класс, который необходимо применить при наведении курсора мыши на нажимаемые элементы, похожие на кнопки. Применяет стили контейнера «наведение курсора» к элементу и его дочерним текстам, ссылкам и иконкам.
• .ui-state-focus: Класс, который необходимо применить при фокусе на клавиатуре на нажимаемые элементы, похожие на кнопки. Применяет стили контейнера «фокус» к элементу и его дочерним текстам, ссылкам и иконкам.
• .ui-state-active: Класс, который необходимо применить при нажатии мышью на нажимаемые элементы, похожие на кнопки. Применяет стили контейнера «активное нажатие» к элементу и его дочерним текстам, ссылкам и иконкам.

Указания по взаимодействию

• .ui-state-highlight: Класс, который необходимо применить к выделенным или выбранным элементам. Применяет стили контейнера «выделение» к элементу и его дочерним текстам, ссылкам и иконкам.
• .ui-state-error: Класс, который необходимо применить к контейнерам сообщений об ошибках. Применяет стили контейнера «ошибка» к элементу и его дочерним текстам, ссылкам и иконкам.
• .ui-state-error-text: Дополнительный класс, который применяет только цвет текста ошибки без фона. Может использоваться, например, для меток форм. Также применяет цвет иконки ошибки к дочерним иконкам.
• .ui-state-disabled: Применяет затемнённую непрозрачность к отключённым элементам пользовательского интерфейса. Предполагается, что он добавляется в дополнение к уже стилизованному элементу.
• .ui-priority-primary: Класс, который необходимо применить к кнопке приоритета 1 в ситуациях, когда необходима иерархия кнопок.
• .ui-priority-secondary: Класс, который необходимо применить к кнопке приоритета 2 в ситуациях, когда необходима иерархия кнопок.

Иконки

Состояния и изображения

• .ui-icon: Базовый класс, который необходимо применить к элементу иконки. Устанавливает размеры в 16-пиксельный квадратный блок, скрывает внутренний текст и устанавливает изображение фонового изображения на изображение спрайта состояния «содержимое». Примечание: классу ui-icon будет предоставлено другое изображение спрайта фона в зависимости от родительского контейнера. Например, элемент ui-icon в контейнере ui-state-default получит цвет в соответствии с цветом иконки ui-state-default.

Типы иконок

После объявления класса ui-icon вы можете продолжить с вторым классом, описывающим тип иконки. Классы иконок обычно следуют синтаксису .ui-icon-{тип иконки}-{подробное описание иконки}-{направление}.

Например, одиночная треугольная иконка, указывающая вправо, выглядит так: .ui-icon-triangle-1-e. ThemeRoller предоставляет полный набор иконок CSS-фреймворка в своём столбце предварительного просмотра. Наведите на них курсор, чтобы увидеть имя класса.

Прочие визуальные элементы

Справочные элементы радиуса угла

• .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: Применяет радиус угла ко всем 4 углам элемента.

Перекрытие и тень

• .ui-widget-overlay: Применяет размеры ширины и высоты 100% к экрану перекрытия, а также цвет/текстуру фона и непрозрачность экрана.
• .ui-widget-shadow: Класс, который необходимо применить к элементам тени виджета перекрытия. Устанавливает смещение по осям X и Y, радиус размытия и цвет.