JQuery UI CSS Framework API

JQuery UI рамки CSS

JQuery UI включает в себя мощную структуру CSS, для создания пользовательских JQuery виджетов и дизайн. Рама содержит необходимые классы общих пользовательского интерфейса, и могут быть использованы обслуживание JQuery UI ThemeRoller. Создавая свои собственные компоненты пользовательского интерфейса с помощью рамки JQuery UI CSS. Вы должны использовать Sharemark конвенцию для того, чтобы подключить в интеграции кода сообщества.

Рамочные классы

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

Помощник по макету

• .ui-helper-hidden : элементы применения display: none имеет .
• .ui-helper-hidden-accessible : элементы приложения для доступа к скрытой (абсолютное позиционирование на странице).
• .ui-helper-reset : обнуление Основные элементы стиля интерфейса. Сбросить элементы , такие как: padding , margin , text-decoration , список-стиль, и так далее.
• .ui-helper-clearfix : применение свойств поплавка упаковки родительского элемента.
• .ui-helper-zfix : для <iframe> элемент применить IFRAME "исправление" CSS.

Виджет контейнер

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

Интерактивное состояние

• .ui-state-default : Нажмите на кнопку элемента может быть применен класс. Из элемента и его детей текст, ссылки, приложения иконки "интерактивными по умолчанию" стиль контейнера.
• .ui-state-hover : мышь приостановлено при применении в интерактивными кнопки элемента , когда на классе. Из элемента и его детей текст, ссылки, приложения иконки "кликабельны зависать" контейнер стиле.
• .ui-state-focus : Класс Application , когда фокус клавиатуры в интерактивными кнопки элемента. Из элемента и его детей текст, ссылки, приложения иконки "кликабельны зависать" контейнер стиле.
• .ui-state-active : Класс Application , когда щелчок мыши может нажать на кнопку элемента. Из элемента и его детей текст, ссылки, иконки приложения "кликабельны активный" контейнер стиля.

Интерактивные быстрое Реплики

• .ui-state-highlight : для выделения или выбора приложения элементов класса. Из элемента и его детей текст, ссылки, иконки приложения "изюминка" контейнер стиля.
• .ui-state-error : сообщение об ошибке элемента контейнера приложения класса. Из элемента и его детей текст, ссылки, иконки приложения "ошибка" контейнер стиля.
• .ui-state-error-text : не только против цвета фона текста класса ошибки приложения. Он может быть использован для формирования метки, чтобы быть суб-цветной значок ошибки значок приложения.
• .ui-state-disabled : отключить элементы пользовательского интерфейса применить тусклый непрозрачность. Это означает, что элементы уже определенной стиля, чтобы добавить дополнительный стиль.
• .ui-priority-primary : Класс первых применений кнопки приоритета. Применение жирного текста.
• .ui-priority-secondary : Класс второго применения кнопки приоритета. Применение нормального веса элементов текста применяются незначительные прозрачности.

иконка

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

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

Значок Тип

В заявлении .ui-icon после класса, то вы можете объявить вторую скорость типа значка класса. При нормальных обстоятельствах, класс значок следует синтаксис .ui-icon-{icon type}-{icon sub description}-{direction} .

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

JQuery UI в 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 : все четыре угла радиуса применения элемента.

Обложка и Тени

• .ui-widget-overlay : чтобы покрыть 100% от ширины экрана и высоту приложения и установить цвет фона / текстуру и прозрачность экрана.
• .ui-widget-shadow : Класс покрытия приложения, установите непрозрачность, смещение / Left Offset, и Тень "толщины" . Толщина всех сторон в тени должны быть установлены поля были применены (дополнение). Смещение, установив маржу (маржа) и левое поле (маржи) были применены (может быть положительным, оно может быть отрицательным).