Classes


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.