jQuery CSS类
您可以使用不同类型的CSS类来设置元素样式,如以下部分所述.
全局类
以下类可用作jQuery Mobile小部件的全局类 :
Sr.No. | Class&说明 |
---|---|
1 | ui-corner-all 它显示带圆角的元素. |
2 | ui-shadow 它显示元素的阴影. |
3 | ui-overlay-shadow 它显示元素的叠加阴影. |
4 | ui-mini 它显示较小的元素. |
按钮类
下表列出了与锚点或按钮元素一起使用的按钮类 :
Sr.No. | Class&说明 |
---|---|
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"将改变背景颜色为黑色). |
图标类
下表列出了与锚点或按钮元素一起使用的图标类 :
Sr.No. | Class&说明 |
---|---|
1 | ui-icon-action 它显示了动作图标. |
2 | ui-icon-alert 它在三角形内显示感叹号. |
3 | ui-icon-arrow-dl 用左箭头指定向下. |
4 | ui-icon-arrow-dr 用右箭头指定向下. |
5 | ui-icon-arrow-ul 用左箭头指定. |
6 | ui-icon-arrow-ur 它用右箭头指定. |
7 | ui-icon-arrow-l It speci左箭头. |
8 | ui-icon-arrow-r 它指定了右箭头. |
9 | ui-icon -arrow -u 它指定向上箭头. |
10 | ui-icon-arrow-d 它指定向下箭头. |
11 | ui-icon-bars 它显示3个水平条,一个在另一个之上. |
12 | ui-icon-bullets 它显示了3个水平子弹,一个在另一个之上. |
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-navigatio n 它指定了导航图标. |
22 | ui-icon-recycle 它显示回收图标. |
23 | ui-icon-refresh 显示刷新图标. |
24 | ui-icon-tag 它表示标签图标. |
25 | ui-icon-video 表示视频或相机图标. |
主题类
它提供了两种不同类型的主题,例如主题"a"和主题"b"来自定义应用程序的外观.您可以通过附加色板字母(a-z)来创建自己的主题类.下表列出了从字母a到z指定的主题类.
Sr.No. | Class&说明 |
---|---|
1 | ui-bar-(az) 它显示栏中的颜色,包括页面中的页眉,页脚和其他栏. |
2 | ui-body - (az) 它显示内容块的颜色,包括listview,弹出窗口,滑块,面板,加载器等. |
3 | ui-btn- (az) 它显示按钮的颜色. |
4 | ui-group-theme-(az) 它显示控制组,列表视图和可折叠集的颜色. |
5 | ui-overlay-(az) 显示弹出窗口,对话框和页面容器的背景颜色. |
6 | ui-pag电子主题 - (az) 它显示页面的颜色. |
网格类
下表列出了使用等宽,无边框,背景,边距或填充的网格类.
Sr.No. | 网格类 | 列 | 列宽 | 对应 |
---|---|---|---|---|
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 |