- jQuery Mobile 教程
- jQuery Mobile - 首页
- jQuery Mobile - 概述
- jQuery Mobile - 设置
- jQuery Mobile - 页面
- jQuery Mobile - 图标
- jQuery Mobile - 过渡效果
- jQuery Mobile - 布局
- jQuery Mobile - 小部件
- jQuery Mobile - 事件
- jQuery Mobile - 表单
- jQuery Mobile - 主题
- jQuery Mobile - CSS 类
- jQuery Mobile - 数据属性
- jQuery Mobile 有用资源
- jQuery Mobile - 面试问题
- jQuery Mobile - 快速指南
- jQuery Mobile - 有用资源
- jQuery Mobile - 讨论
jQuery Mobile - CSS 类
jQuery CSS 类
您可以使用不同类型的 CSS 类来设置元素的样式,如下节所述。
全局类
以下类可作为 jQuery Mobile 小部件上的全局类使用:
序号 | 类和描述 |
---|---|
1 | ui-corner-all 它以圆角显示元素。 |
2 | ui-shadow 它为元素显示阴影。 |
3 | ui-overlay-shadow 它为元素显示叠加阴影。 |
4 | ui-mini 它显示较小的元素。 |
按钮类
下表列出了与锚点或按钮元素一起使用的按钮类:
序号 | 类和描述 |
---|---|
1 | ui-btn 它指定元素将被设置为按钮样式。 |
2 | ui-btn-inline 它将按钮显示为内联元素,根据需要节省标签的空间。 |
3 | ui-btn-icon-top 它将图标放在文本上方。 |
4 | ui-btn-icon-right 它将图标放在文本右侧。 |
5 | ui-btn-icon-bottom 它将图标放在文本下方。 |
6 | ui-btn-icon-left 它将图标放在文本左侧。 |
7 | ui-btn-icon-notext 它仅显示图标。 |
8 | ui-btn-a|b 它显示按钮的颜色(“a”将是默认背景颜色,即灰色,“b”将背景颜色更改为黑色)。 |
图标类
下表列出了与锚点或按钮元素一起使用的图标类:
序号 | 类和描述 |
---|---|
1 | ui-icon-action 它显示操作图标。 |
2 | ui-icon-alert 它在三角形内显示感叹号。 |
3 | ui-icon-arrow-d-l 它指定向左下箭头。 |
4 | ui-icon-arrow-d-r 它指定向右下箭头。 |
5 | ui-icon-arrow-u-l 它指定向左上箭头。 |
6 | ui-icon-arrow-u-r 它指定向右上箭头。 |
7 | ui-icon-arrow-l 它指定左箭头。 |
8 | ui-icon-arrow-r 它指定右箭头。 |
9 | ui-icon-arrow-u 它指定上箭头。 |
10 | ui-icon-arrow-d 它指定下箭头。 |
11 | ui-icon-bars 它显示三个水平条,一个在另一个上面。 |
12 | ui-icon-bullets 它显示三个水平点,一个在另一个上面。 |
13 | ui-icon-carat-d 它将插入符号显示到下方。 |
14 | ui-icon-carat-l 它将插入符号显示到左侧。 |
15 | ui-icon-carat-r 它将插入符号显示到右侧。 |
16 | ui-icon-carat-u 它将插入符号显示到上方。 |
17 | ui-icon-check 它显示复选标记图标。 |
18 | ui-icon-comment 它指定注释或消息。 |
19 | ui-icon-forbidden 它显示禁止图标。 |
20 | ui-icon-forward 它指定转发图标。 |
21 | ui-icon-navigation 它指定导航图标。 |
22 | ui-icon-recycle 它显示回收图标。 |
23 | ui-icon-refresh 它显示刷新图标。 |
24 | ui-icon-tag 它表示标签图标。 |
25 | ui-icon-video 它表示视频或相机图标。 |
主题类
它提供两种不同的主题类型,例如主题“a”和主题“b”,以自定义应用程序的外观。您可以通过追加色板字母 (a-z) 来创建自己的主题类。下表列出了从字母 a 到 z 指定的主题类。
序号 | 类和描述 |
---|---|
1 | ui-bar-(a-z) 它显示条的颜色,包括页面中的页眉、页脚和其他条。 |
2 | ui-body-(a-z) 它显示内容块的颜色,包括列表视图、弹出窗口、滑块、面板、加载程序等。 |
3 | ui-btn-(a-z) 它显示按钮的颜色。 |
4 | ui-group-theme-(a-z) 它显示控制组、列表视图和可折叠集的颜色。 |
5 | ui-overlay-(a-z) 它显示弹出窗口、对话框和页面容器的背景颜色。 |
6 | ui-page-theme-(a-z) 它显示页面的颜色。 |
网格类
下表列出了与等宽、无边框、背景、边距或填充一起使用的网格类。
序号 | 网格类 | 列 | 列宽 | 对应于 |
---|---|---|---|---|
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 |