jQuery Mobile - CSS Classes
jQuery CSS Classes
You can use different types of CSS classes to style the elements as described in the below sections.
Global Classes
The following classes can be used as global classes on jQuery Mobile widgets −
| Sr.No. |
Class & Description |
| 1 |
ui-corner-all
It displays the elements with rounded corners.
|
| 2 |
ui-shadow
It displays the shadow for the elements.
|
| 3 |
ui-overlay-shadow
It displays the overlay shadow for the elements.
|
| 4 |
ui-mini
It displays the smaller elements.
|
Button Classes
The following table lists button classes that are used with anchor or button elements −
| Sr.No. |
Class & Description |
| 1 |
ui-btn
It specifies that the element will be styled as button.
|
| 2 |
ui-btn-inline
It shows the button as inline element which saves the space as needed for the label.
|
| 3 |
ui-btn-icon-top
It places the icon above the text.
|
| 4 |
ui-btn-icon-right
It places the icon right of the text.
|
| 5 |
ui-btn-icon-bottom
It places the icon below the text.
|
| 6 |
ui-btn-icon-left
It places the icon left of the text.
|
| 7 |
ui-btn-icon-notext
It shows the only icon.
|
| 8 |
ui-btn-a|b
It displays the color of the button ("a" will be the default background color i.e. gray and "b" will change the background color to black).
|
Icon Classes
The following table lists icon classes that are used with anchor or button elements −
| Sr.No. |
Class & Description |
| 1 |
ui-icon-action
It shows the action icon.
|
| 2 |
ui-icon-alert
It display the exclamation mark inside a triangle.
|
| 3 |
ui-icon-arrow-d-l
It specifies down with left arrow.
|
| 4 |
ui-icon-arrow-d-r
It specifies down with right arrow.
|
| 5 |
ui-icon-arrow-u-l
It specifies up with left arrow.
|
| 6 |
ui-icon-arrow-u-r
It specifies up with right arrow.
|
| 7 |
ui-icon-arrow-l
It specifies the left arrow.
|
| 8 |
ui-icon-arrow-r
It specifies the right arrow.
|
| 9 |
ui-icon-arrow-u
It specifies the up arrow.
|
| 10 |
ui-icon-arrow-d
It specifies the down arrow.
|
| 11 |
ui-icon-bars
It shows the 3 horizontal bars one above the other.
|
| 12 |
ui-icon-bullets
It shows the 3 horizontal bullets one above the other.
|
| 13 |
ui-icon-carat-d
It displays the carat to down.
|
| 14 |
ui-icon-carat-l
It displays the carat to left.
|
| 15 |
ui-icon-carat-r
It displays the carat to right.
|
| 16 |
ui-icon-carat-u
It displays the carat to up.
|
| 17 |
ui-icon-check
It shows the checkmark icon.
|
| 18 |
ui-icon-comment
It specifies the comment or message.
|
| 19 |
ui-icon-forbidden
It displays the forbidden icon.
|
| 20 |
ui-icon-forward
It specifies the forward icon.
|
| 21 |
ui-icon-navigation
It specifies the navigation icon.
|
| 22 |
ui-icon-recycle
It displays the recycle icon.
|
| 23 |
ui-icon-refresh
It shows the refresh icon.
|
| 24 |
ui-icon-tag
It indicates the tag icon.
|
| 25 |
ui-icon-video
It indicates the video or camera icon.
|
Theme Classes
It provides two different types of themes such as theme "a" and theme "b" to customize the look of the application. You can create your own theme classes by appending swatch letter (a-z). Following table lists theme classes which are specified from letter a to z.
| Sr.No. |
Class & Description |
| 1 |
ui-bar-(a-z)
It displays the color for bar including headers, footers, and other bars in the page.
|
| 2 |
ui-body-(a-z)
It displays the color for content block including listview, popups, sliders, panels, loaders, etc.
|
| 3 |
ui-btn-(a-z)
It displays the color for button.
|
| 4 |
ui-group-theme-(a-z)
It displays the color for controlgroups, listviews, and collapsible sets.
|
| 5 |
ui-overlay-(a-z)
It displays the background color for popup, dialog, and page containers.
|
| 6 |
ui-page-theme-(a-z)
It displays the color for pages.
|
Grid Classes
Following table lists grid classes that are used with equal width, no border, background, margin or padding.
| Sr.No. |
Grid Class |
Columns |
Column Widths |
Corresponds To |
| 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 |
