Лучшее руководство по JQuery UI CSS Framework API в 2024 году. В этом руководстве вы можете изучить JQuery UI CSS Framework API
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, и Тень "толщины" . Толщина всех сторон в тени должны быть установлены поля были применены (дополнение). Смещение, установив маржу (маржа) и левое поле (маржи) были применены (может быть положительным, оно может быть отрицательным).