Classes
Description: CSS classes for common styles
Style Classes
jQuery Mobile uses the following style classes:
ui-corner-all | Adds rounded corners to the element. |
ui-shadow | Adds an item shadow around the element. |
ui-overlay-shadow | Adds an overlay shadow around the element. The intended effect is for the element to appear to float above other elements. |
ui-mini | Reduces the font size and scales down paddings proportionally to produce a miniature version of the element for use in toolbars and tight spaces. |
These classes can be applied any of the framework's widgets.
Widget-specific classes
ui-collapsible-inset | The collapsible widget has horizontal margins, borders, and rounded corners when this class is applied. |
ui-listview-inset | The listview widget has horizontal margins, borders, and rounded corners when this class is applied. |
Button-specific classes
In addition to the style classes, you can add the following classes to a (anchor) and button elements to render them touch-friendly:
| Basic options | |
|---|---|
ui-btn | You must add this class to indicate that the element is to be styled as a button. This is a prerequisite for adding any other button-related classes. |
ui-btn-inline | Displays the button inline. This means that it will only consume as much space as is needed for the label. This allows you to place buttons side by side, flowing with the text. |
ui-shadow-icon | Draws a shadow around the icon. |
| Icon positioning | |
ui-btn-icon-top | The icon appears above the text |
ui-btn-icon-right | The icon appears to the right of the text |
ui-btn-icon-bottom | The icon appears below the text |
ui-btn-icon-left | The icon appears to the left of the text |
ui-btn-icon-notext | The button text is suppressed, and only the icon is shown. The result is a circular button the size of the icon. |
| Theme | |
ui-btn-[a-z] | Sets the color scheme (swatch) for the button. Use a single letter from a-z that maps to the swatches included in your theme. For example: ui-btn-b |
Icon classes
Icons are used by a variety of widgets. The table below lists all the available icon classes. The widgets which support an icon usually have an option named "icon". The value for that option is the name of the icon, which is appended to the prefix ui-icon- to create the icon class name. In the class list below, the icon names are emphasized as part of the icon class name.
ui-icon-alert | An exclamation mark inside a triangle. |
ui-icon-arrow-l | An arrow pointing left (←). |
ui-icon-arrow-r | An arrow pointing right (→). |
ui-icon-arrow-u | An arrow pointing up (↑). |
ui-icon-arrow-d | An arrow pointing down (↓). |
ui-icon-back | A curved arrow arcing counterclockwise upwards. |
ui-icon-bars | Three horizontal bars one above the other. |
ui-icon-carat-b | A carat pointing down (v). |
ui-icon-carat-l | A carat pointing left (<). |
ui-icon-carat-r | A carat pointing right (>). |
ui-icon-carat-t | A carat pointing up (^). |
ui-icon-check | A checkmark (✓). |
ui-icon-delete | A diagonal cross similar to (✕). |
ui-icon-edit | A pencil - similar to (✎) but pointing to the lower left. |
ui-icon-forward | A curved arrow arcing clockwise upwards. |
ui-icon-gear | A gear (⚙). |
ui-icon-grid | A 3✕3 grid. |
ui-icon-home | A house similar to (⌂). |
ui-icon-minus | A "minus" sign (-). |
ui-icon-plus | A "plus" sign (+). |
ui-icon-refresh | A circular arrow similar to (⟳). |
ui-icon-search | A magnifying glass. |
ui-icon-star | A star similar to (✭). |
Theme-related classes
The class prefixes in the table below are used for applying a swatch to various parts of the user interface. The actual class name is constructed by appending the swatch letter (a-z) to the prefix. For example, the class ui-body-a is the swatch applied to the page.
ui-bar-[a-z] | Sets the color scheme (swatch) for a bar. This includes headers and footers, or bars you include in the page. |
ui-body-[a-z] | Sets the color scheme (swatch) for a content block. This includes page content panes (deprecated as of 1.4.0), listview items, popups, collapsibles, the loader widget, sliders, and panels. |
ui-btn-[a-z] | Sets the color scheme (swatch) for a button. |
ui-group-theme-[a-z] | Sets the color scheme (swatch) for controlgroups, listviews, and collapsible sets (accordions). |
ui-overlay-[a-z] | Sets the color scheme (swatch) for backgrounds such as those of popup widgets, and page containers. |
ui-page-theme-[a-z] | Sets the color scheme (swatch) for pages. |
ui-panel-page-container-[a-z] | Panels temporarily set the theme on the page container using this class. |