Классы
Описание: CSS классы для общих стилей
Классы стилей
jQuery Mobile использует следующие классы стилей:
ui-corner-all | Добавляет скругленные углы к элементу. |
ui-shadow | Добавляет тень к элементу. |
ui-overlay-shadow | Добавляет наложение тени вокруг элемента. Это создаёт эффект, будто элемент нависает над другими элементами. |
ui-mini | Уменьшает размер шрифта и масштабирует отступы пропорционально, создавая миниатюрную версию элемента для использования в панелях инструментов и ограниченном пространстве. |
Эти классы могут быть применены к любому виджету фреймворка.
Классы, специфичные для виджетов
ui-collapsible-inset | Виджет collapsible имеет горизонтальные отступы, границы и скругленные углы, когда применяется этот класс. |
ui-listview-inset | Виджет listview имеет горизонтальные отступы, границы и скругленные углы, когда применяется этот класс. |
Классы, специфичные для кнопок
Помимо классов стилей, вы можете добавить следующие классы к элементам a (якорю) и button для обеспечения удобства использования с сенсорными экранами:
| Основные параметры | |
|---|---|
ui-btn | Необходимо добавить этот класс, чтобы указать, что элемент должен быть стилизован как кнопка. Это необходимо для добавления других классов, связанных с кнопками. |
ui-btn-inline | Отображает кнопку в строку. Это означает, что она будет занимать только необходимое пространство для метки. Это позволяет размещать кнопки рядом друг с другом, следуя тексту. |
ui-shadow-icon | Рисует тень вокруг значка. |
| Позиционирование значков | |
ui-btn-icon-top | Значок отображается над текстом |
ui-btn-icon-right | Значок отображается справа от текста |
ui-btn-icon-bottom | Значок отображается под текстом |
ui-btn-icon-left | Значок отображается слева от текста |
ui-btn-icon-notext | Текст кнопки скрывается, и отображается только значок. Результатом является круглая кнопка размером со значок. |
| Тема | |
ui-btn-[a-z] | Устанавливает схему цветов (оттенок) для кнопки. Используйте одиночную букву от a до z, которая соответствует оттенкам, включённым в вашу тему. Например: ui-btn-b |
Классы значков
Значки используются различными виджетами. В таблице ниже перечислены все доступные классы значков. Виджеты, которые поддерживают значок, обычно имеют опцию с именем "icon". Значение этой опции является именем значка, которое добавляется к префиксу ui-icon- для создания имени класса значка. В списке классов ниже имена значков выделены в качестве части имени класса значка.
ui-icon-alert | Знак восклицания внутри треугольника. |
ui-icon-arrow-l | Стрелка, указывающая влево (←). |
ui-icon-arrow-r | Стрелка, указывающая вправо (→). |
ui-icon-arrow-u | Стрелка, указывающая вверх (↑). |
ui-icon-arrow-d | Стрелка, указывающая вниз (↓). |
ui-icon-back | Изогнутая стрелка, изогнутая против часовой стрелки вверх. |
ui-icon-bars | Три горизонтальные полосы, расположенные одна над другой. |
ui-icon-carat-b | Каретка, указывающая вниз (v). |
ui-icon-carat-l | Каретка, указывающая влево (<). |
ui-icon-carat-r | Каретка, указывающая вправо (>). |
ui-icon-carat-t | Каретка, указывающая вверх (^). |
ui-icon-check | Галочка (✓). |
ui-icon-delete | Диагональный крест, похожий на (✕). |
ui-icon-edit | Карандаш - похожий на (✎), но направленный вниз влево. |
ui-icon-forward | Изогнутая стрелка, изогнутая по часовой стрелке вверх. |
ui-icon-gear | Шестерёнка (⚙). |
ui-icon-grid | 3✕3 сетка. |
ui-icon-home | Дом, похожий на (⌂). |
ui-icon-minus | Знак "минус" (-). |
ui-icon-plus | Знак "плюс" (+). |
ui-icon-refresh | Круговая стрелка, похожая на (⟳). |
ui-icon-search | Лупа. |
ui-icon-star | Звезда, похожая на (✭). |
Классы, связанные с темой
Префиксы классов в таблице ниже используются для применения оттенка к различным частям пользовательского интерфейса. Фактическое имя класса формируется путем добавления буквы оттенка (a-z) к префиксу. Например, класс ui-body-a — это оттенок, применяемый к странице.
ui-bar-[a-z] | Устанавливает схему цветов (оттенок) для панели. Это включает заголовки и подвалы или панели, которые вы добавляете на страницу. |
ui-body-[a-z] | Устанавливает схему цветов (оттенок) для блока контента. Это включает панели содержимого страницы (устарело начиная с версии 1.4.0), элементы списка, всплывающие окна, раскрывающиеся элементы, виджет загрузчика, ползунки и панели. |
ui-btn-[a-z] | Устанавливает схему цветов (оттенок) для кнопки. |
ui-group-theme-[a-z] | Устанавливает схему цветов (оттенок) для наборов управления, списков и наборов с выпадающими элементами (аккордеоны). |
ui-overlay-[a-z] | Устанавливает схему цветов (оттенок) для фоновых изображений, таких как те, которые используются для всплывающих виджетов и контейнеров страниц. |
ui-page-theme-[a-z] | Устанавливает схему цветов (оттенок) для страниц. |
ui-panel-page-container-[a-z] | Панели временно устанавливают тему для контейнера страницы с помощью этого класса. |
