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-allIt displays the elements with rounded corners. |
| 2 | ui-shadowIt displays the shadow for the elements. |
| 3 | ui-overlay-shadowIt displays the overlay shadow for the elements. |
| 4 | ui-miniIt 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-btnIt specifies that the element will be styled as button. |
| 2 | ui-btn-inlineIt shows the button as inline element which saves the space as needed for the label. |
| 3 | ui-btn-icon-topIt places the icon above the text. |
| 4 | ui-btn-icon-rightIt places the icon right of the text. |
| 5 | ui-btn-icon-bottomIt places the icon below the text. |
| 6 | ui-btn-icon-leftIt places the icon left of the text. |
| 7 | ui-btn-icon-notextIt shows the only icon. |
| 8 | ui-btn-a|bIt 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-actionIt shows the action icon. |
| 2 | ui-icon-alertIt display the exclamation mark inside a triangle. |
| 3 | ui-icon-arrow-d-lIt specifies down with left arrow. |
| 4 | ui-icon-arrow-d-rIt specifies down with right arrow. |
| 5 | ui-icon-arrow-u-lIt specifies up with left arrow. |
| 6 | ui-icon-arrow-u-rIt specifies up with right arrow. |
| 7 | ui-icon-arrow-lIt specifies the left arrow. |
| 8 | ui-icon-arrow-rIt specifies the right arrow. |
| 9 | ui-icon-arrow-uIt specifies the up arrow. |
| 10 | ui-icon-arrow-dIt specifies the down arrow. |
| 11 | ui-icon-barsIt shows the 3 horizontal bars one above the other. |
| 12 | ui-icon-bulletsIt shows the 3 horizontal bullets one above the other. |
| 13 | ui-icon-carat-dIt displays the carat to down. |
| 14 | ui-icon-carat-lIt displays the carat to left. |
| 15 | ui-icon-carat-rIt displays the carat to right. |
| 16 | ui-icon-carat-uIt displays the carat to up. |
| 17 | ui-icon-checkIt shows the checkmark icon. |
| 18 | ui-icon-commentIt specifies the comment or message. |
| 19 | ui-icon-forbiddenIt displays the forbidden icon. |
| 20 | ui-icon-forwardIt specifies the forward icon. |
| 21 | ui-icon-navigationIt specifies the navigation icon. |
| 22 | ui-icon-recycleIt displays the recycle icon. |
| 23 | ui-icon-refreshIt shows the refresh icon. |
| 24 | ui-icon-tagIt indicates the tag icon. |
| 25 | ui-icon-videoIt 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 |
Leave a Reply