- jQuery Mobile Tutorial
- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
- jQuery Mobile Useful Resources
- jQuery Mobile - Interview Questions
- jQuery Mobile - Quick Guide
- jQuery Mobile - Useful Resources
- jQuery Mobile - Discussion
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 |