JQuery CSS классы
JQuery Mobile использовать CSS классы для оформления различных элементов.
Для получения контрольного списка ниже, мы включили классы CSS для общих стилей.
Глобальные классы
Эти классы могут быть добавлены на любом JQuery Mobile виджетов ( buttons, toolbars, panels, tables, lists и т.д ..):
| Класс | Описание |
|---|---|
| ui-corner-all | Добавляет закругленные углы к элементу |
| ui-shadow | Добавляет тень к элементу |
| ui-overlay-shadow | Добавляет наложения тени к элементу |
| ui-mini | Делает элемент меньше |
Кнопка Классы
В дополнение к глобальным классам, вы можете добавить следующие классы <a> или <button> элементы (не <input> кнопки):
| Класс | Описание |
|---|---|
| ui-btn | Должны быть добавлены к <a> элементы , если вы хотите, чтобы быть стилизовано как кнопки |
| ui-btn-inline | Отображает кнопку инлайн |
| ui-btn-icon-top | Позиции значок над текстом кнопки |
| ui-btn-icon-right | Позиции значок справа от текста кнопки |
| ui-btn-icon-bottom | Позиции значок под текстом кнопки |
| ui-btn-icon-left | Позиции значок слева от текста кнопки |
| ui-btn-icon-notext | Отображает только значок |
| ui-btn-a|b | Определяет цвет кнопки. "a" по умолчанию (серый фон с черным текстом), в то время как "b" изменит цвет на черном фоне с белым текстом |
Icon Классы
Все доступные классы значок для <a> и <button> элементов (см Reference значки для того, как использовать иконки на другие элементы):
| Класс | Значок Описание | Значок |
|---|---|---|
| ui-icon-action | Действие (стрелка искрения по часовой стрелке из коробки) | |
| ui-icon-alert | Восклицательный знак внутри треугольника | |
| ui-icon-audio | Звук / Динамики | |
| ui-icon-arrow-d-l | Вниз, влево стрелка | |
| ui-icon-arrow-d-r | Вниз, вправо стрелка | |
| ui-icon-arrow-u-l | Вверх, левая стрелка | |
| ui-icon-arrow-u-r | Вверх, стрелка вправо | |
| ui-icon-arrow-l | стрелка влево | |
| ui-icon-arrow-r | Правая стрелка | |
| ui-icon-arrow-u | Стрелка вверх | |
| ui-icon-arrow-d | Кнопка "Стрелка вниз | |
| ui-icon-back | Назад (изогнутой стрелкой электрической дуги против часовой стрелки вверх) | |
| ui-icon-bars | Три горизонтальные полоски друг на друга | |
| ui-icon-bullets | Три горизонтальные пули друг над другом | |
| ui-icon-calendar | Календарь | |
| ui-icon-camera | камера | |
| ui-icon-carat-d | Вниз карата | |
| ui-icon-carat-l | левый каратах | |
| ui-icon-carat-r | правый каратах | |
| ui-icon-carat-u | до карата | |
| ui-icon-check | Галочка | |
| ui-icon-clock | Часы | |
| ui-icon-cloud | облако | |
| ui-icon-comment | Комментарий / Сообщение | |
| ui-icon-delete | Удалить | |
| ui-icon-edit | Редактировать / Карандаш | |
| ui-icon-eye | глаз | |
| ui-icon-forbidden | Запретный знак | |
| ui-icon-forward | Вперед - (изогнутая стрелка дугогасящие по часовой стрелке вверх) | |
| ui-icon-gear | зубчатое колесо | |
| ui-icon-grid | сетка | |
| ui-icon-heart | Сердце символ / Любовь | |
| ui-icon-home | Главная / Дом | |
| ui-icon-info | Информация | |
| ui-icon-location | Место нахождения | |
| ui-icon-lock | Блокировка / Padlock | |
| ui-icon-mail | Mail / письмо | |
| ui-icon-minus | знак минус | |
| ui-icon-navigation | навигация | |
| ui-icon-phone | телефон | |
| ui-icon-power | Питание (вкл / выкл) | |
| ui-icon-plus | знак плюс | |
| ui-icon-recycle | Переработать знак | |
| ui-icon-refresh | Обновить - Круговая стрелка | |
| ui-icon-search | Поиск / увеличительное стекло | |
| ui-icon-shop | Магазин / сумка | |
| ui-icon-star | звезда | |
| ui-icon-tag | Тег | |
| ui-icon-user | Пользователь / Человек | |
| ui-icon-video | Видеокамера |
Тема Классы
JQuery Mobile предоставляет две тематические классы: а (серые) и б (черный). Тем не менее, вы также можете создавать свои собственные, пользовательские значения класса - вплоть до буквы "z" (см главу темы). В таблице ниже перечислены доступные классы темы. Буквы (az) означает , что вы можете указать букву от А до Я. Например: ui-bar-a или ui-bar-b и т.д.
| Класс | Описание |
|---|---|
| ui-bar-(a-z) | Задает цвет для бара - заголовки, колонтитулы и другие бары |
| ui-body-(a-z) | Задает цвет для содержимого блока - страниц панелей контента (устаревшее в версии 1.4.0), ListView предметы, всплывающие окна, collapsibles, загрузчик, ползунки, и панели |
| ui-btn-(a-z) | Определяет цвет для кнопки (и значок) |
| ui-group-theme-(a-z) | Задает цвет для controlgroups, ListViews и разборных комплектов |
| ui-overlay-(a-z) | Определяет цвет фона страницы, которая, на вершине появляется диалоговое всплывающее окно и другие контейнеры страница |
| ui-page-theme-(a-z) | Определяет цвет для страниц |
Сетка Классы
Столбцы в сетке имеют одинаковую ширину (и 100% широкий в общей сложности), без границ, фон, края или дополнения. Есть пять макет сетки, которые могут быть использованы:
| Сетка Класс | Колонны | Колонка Ширины | Соответствует | пример |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Для получения дополнительной информации о сетях, читайте нашу Jquery Mobile Сетки Глава .