📅 最后修改于: 2020-12-08 06:33:29 🧑 作者: Mango
您可以使用不同类型的CSS类来对元素进行样式设置，如以下各节所述。
以下类可用作jQuery Mobile小部件上的全局类-
| 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. |
下表列出了与锚点或按钮元素一起使用的按钮类-
| 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). |
下表列出了与锚点或按钮元素一起使用的图标类-
| 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. |
它提供了两种不同类型的主题，例如主题“ a”和主题“ b”，以自定义应用程序的外观。您可以通过添加样本字母(az)来创建自己的主题类。下表列出了从字母a到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. |
下表列出了使用等宽，无边框，背景，边距或填充的网格类别。
| 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 |