jQuery Mobile - CSS Classes


Advertisements


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


Advertisements
E-Books Store