- jQuery Mobile - Data Attributes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Themes
- jQuery Mobile - Forms
- jQuery Mobile - Events
- jQuery Mobile - Widgets
- jQuery Mobile - Layouts
- jQuery Mobile - Transitions
- jQuery Mobile - Icons
- jQuery Mobile - Pages
- jQuery Mobile - Setup
- jQuery Mobile - Overview
- jQuery Mobile - Home
jQuery Mobile Useful Resources
- jQuery Mobile - Discussion
- jQuery Mobile - Useful Resources
- jQuery Mobile - Quick Guide
- jQuery Mobile - Interview Questions
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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 psts 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-inpne It shows the button as inpne 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 psts 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 apppcation. You can create your own theme classes by appending swatch letter (a-z). Following table psts 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 pstview, popups, spders, 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, pstviews, 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 psts 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 |