jQuery Mobile - классы CSS
Классы jQuery CSS
Вы можете использовать различные типы классов CSS для стилизации элементов, как описано в следующих разделах.
Глобальные классы
Следующие классы могут использоваться как глобальные классы в виджетах jQuery Mobile:
| Sr. No. | Класс и описание |
|---|---|
| 1 | ui-corner-all Он отображает элементы со скругленными углами. |
| 2 | ui-shadow Он отображает тень для элементов. |
| 3 | ui-overlay-shadow Он отображает наложенную тень для элементов. |
| 4 | ui-mini Он отображает более мелкие элементы. |
Классы кнопок
В следующей таблице перечислены классы кнопок, которые используются с элементами привязки или кнопки.
| Sr. No. | Класс и описание |
|---|---|
| 1 | ui-btn Он указывает, что элемент будет оформлен как кнопка. |
| 2 | ui-btn-inline Он показывает кнопку как встроенный элемент, который экономит место, необходимое для метки. |
| 3 | ui-btn-icon-top Он помещает значок над текстом. |
| 4 | ui-btn-icon-right Значок размещается справа от текста. |
| 5 | ui-btn-icon-bottom Он помещает значок под текстом. |
| 6 | ui-btn-icon-left Значок размещается слева от текста. |
| 7 | ui-btn-icon-notext Он показывает единственный значок. |
| 8 | ui-btn-a|b Он отображает цвет кнопки («a» будет цветом фона по умолчанию, т.е. серым, а «b» изменит цвет фона на черный). |
Классы иконок
В следующей таблице перечислены классы значков, которые используются с элементами привязки или кнопки.
| Sr. No. | Класс и описание |
|---|---|
| 1 | ui-icon-action Он показывает значок действия. |
| 2 | ui-icon-alert Он отображает восклицательный знак внутри треугольника. |
| 3 | ui-icon-arrow-d-l Указывает стрелкой влево вниз. |
| 4 | ui-icon-arrow-d-r Он указывает вниз стрелкой вправо. |
| 5 | ui-icon-arrow-u-l Указывает стрелкой влево вверх. |
| 6 | ui-icon-arrow-u-r Он указывает вверх стрелкой вправо. |
| 7 | ui-icon-arrow-l Он указывает стрелку влево. |
| 8 | ui-icon-arrow-r Он указывает стрелку вправо. |
| 9 | ui-icon-arrow-u Он указывает стрелку вверх. |
| 10 | ui-icon-arrow-d Он указывает стрелку вниз. |
| 11 | ui-icon-bars Он показывает 3 горизонтальные полосы одна над другой. |
| 12 | ui-icon-bullets Он показывает 3 горизонтальных маркера одна над другой. |
| 13 | ui-icon-carat-d Он отображает караты вниз. |
| 14 | ui-icon-carat-l Он отображает количество каратов слева. |
| 15 | ui-icon-carat-r Карат отображается справа. |
| 16 | ui-icon-carat-u На нем показано количество каратов вверх. |
| 17 | ui-icon-check Он показывает значок галочки. |
| 18 | ui-icon-comment Он определяет комментарий или сообщение. |
| 19 | ui-icon-forbidden На нем отображается запрещенный значок. |
| 20 | ui-icon-forward Он указывает значок перемотки. |
| 21 год | ui-icon-navigation Он указывает значок навигации. |
| 22 | ui-icon-recycle На нем отображается значок корзины. |
| 23 | ui-icon-refresh Он показывает значок обновления. |
| 24 | ui-icon-tag Он указывает на значок тега. |
| 25 | ui-icon-video Он указывает на значок видео или камеры. |
Тематические классы
Он предоставляет два разных типа тем, например, тему «a» и тему «b», для настройки внешнего вида приложения. Вы можете создать свои собственные классы тем, добавив букву образца (az). В следующей таблице перечислены классы тем, указанные от буквы a до z.
| Sr. No. | Класс и описание |
|---|---|
| 1 | ui-bar-(a-z) Он отображает цвет панели, включая верхние, нижние колонтитулы и другие полосы на странице. |
| 2 | ui-body-(a-z) Он отображает цвет для блока содержимого, включая просмотр списка, всплывающие окна, слайдеры, панели, загрузчики и т. Д. |
| 3 | ui-btn-(a-z) Он отображает цвет кнопки. |
| 4 | ui-group-theme-(a-z) Он отображает цвет для контрольных групп, списков и сворачиваемых наборов. |
| 5 | ui-overlay-(a-z) Он отображает цвет фона для всплывающих окон, диалоговых окон и контейнеров страниц. |
| 6 | ui-page-theme-(a-z) Он отображает цвет страниц. |
Классы сетки
В следующей таблице перечислены классы сетки, которые используются с одинаковой шириной, без границ, фона, полей или отступов.
| Sr. No. | Класс сетки | Столбцы | Ширина столбца | Соответствует |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50% / 50% | ui-block-a | b |
| 3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c |
| 4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d |
| 5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e |