Оформление в jQuery UI
Все плагины 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--- — после указания класса 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 (могут быть отрицательными).
От автора jquery.page2page.ru
Мини-игра про поход за продуктами во время карантина.
Твой уникальный шанс напинать короновирусу буквально.
Theming jQuery UI
All jQuery UI plugins are designed to allow a developer to seamlessly integrate UI widgets into the look and feel of their site or application. Each plugin is styled with CSS and contains two layers of style information: standard jQuery UI CSS Framework styles and plugin-specific styles.
The jQuery UI CSS Framework provides semantic presentation classes to indicate the role of an element within a widget such as a header, content area, or clickable region. These are applied consistently across all widgets so a clickable tab, accordion, or button will all have the same ui-state-default class applied to indicate that it is clickable. When a user mouses over one of these elements, this class is changed to ui-state-hover , then ui-state-active when selected. This level of class consistency makes it easy to ensure that all elements with a similar role or interaction state will look the same across all widgets.
The CSS Framework styles are encapsulated in a single file called theme.css and this is the file modified by the ThemeRoller application. Framework styles only include attributes that affect the look and feel (primarily color, background images, and icons) so these are «safe» styles that will not affect functionality of individual plugins. This separation means that a developer can create a custom look and feel by modifying the colors and images in the theme.css file and know that as future plugins or bug fixes become available, these should work with the theme without modification.
Since the framework styles only cover look and feel, plugin specific stylesheets are separated. These contain all the additional structural style rules required to make the widget functional, such as dimensions, padding, margins, positioning, and floats. When downloading jQuery UI, these can be found in jquery-ui.structure.css .
We encourage all developers creating jQuery plugins to leverage the jQuery UI CSS Framework because it will make it much easier for end users to theme and use your plugin.
link Getting started
There are three general approaches to theming jQuery UI plugins:
- Download a ThemeRoller theme: The easiest way to build a theme is to use ThemeRoller to generate and download a theme. This app will create a new jquery-ui.theme.css file and an images directory containing all necessary background images and icon sprites which can simply be dropped into your project. This approach will be the easiest to create and maintain but limits customization to the options provided in ThemeRoller.
- Modify the CSS files: To get a bit more control over the look and feel, you may choose to start with the default theme (Smoothness) or a ThemeRoller-generated theme and then adjust the jquery-ui.theme.css file or any of the individual plugin stylesheets. For example, you could easily tweak the corner radius for all buttons to be different than the rest of the UI components or change the path for the icon sprite to use a custom set. With a bit of style scoping, you can even use multiple themes together in a single UI. To keep maintenance simple, restricting changes to just the jquery-ui.theme.css file and images is recommended.
- Write completely custom CSS: For the greatest amount of control, the CSS for each plugin can be written from scratch without using the framework classes or plugin-specific stylesheet. This may be necessary if the desired look and feel can’t be achieved by modifying the CSS or if highly customized markup is used. This approach requires deep expertise in CSS and will require manual updates for future plugins.