开发手册 欢迎您!
软件开发者资料库

jQuery Mobile - CSS类

jQuery Mobile CSS类 - 从基本到高级概念的简单简单步骤学习jQuery Mobile,包括概述,设置,入门,页面,转换,布局,小部件,按钮,复选框和单选小部件,图标,可折叠小部件,弹出窗口等示例,工具栏,导航栏,控制组小工具,面板,Datepicker,事件,可过滤小工具,翻转开关小工具,表格,网格,分组和划分内容,列表视图,加载小工具,导航,表单,主题,CSS类,数据属性,范围滑块, Selectmenu,Slider,Tabs,Textinput Widget,Touch,Scroll,Page Events。

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.网格类列宽对应
1ui-grid-solo1100%ui-block -a
2ui-grid -a250%/50%ui-block-a | b
3ui-grid-b333%/33%/33%ui-block- a | b | c
4ui- grid-c425%/25%/25%/25%ui-block-a | b | c | d
5ui-grid-d520%/20%/20%/20 %/20%ui-block-a | b | c | d | e