图标(Icons)

jQuery Mobile自带一组内置的图标可以应用到按钮(buttons),折叠组件(collapsibles),列表按钮(listview buttons)等等。有每个图标都有SVG(可伸缩矢量图形 - Scalable Vector Graphics)和PNG图片两种类型。默认情况下用SVG在SD和HD屏幕上看起来效果会很好,如果使用平台不支持SVG,框架使用PNG图标

图标设置(Icon set)

下面的按钮中显示的文本对应着按钮上的图标

在你要设置的图标控件中添加data-icon属性,并使用的图标的名称作为值。例如 data-icon="arrow-r".

给链接按钮(渲染<a>标签形成的按钮)和button元素添加一个图标,像使用样式(class)一样使用名称前缀ui-icon-.例如data-icon="arrow-r".

参见按钮标记(button markup).

自定义图标(Custom Icons)

图标显示的是:after伪元素的背景图片(background image)。把为元素作为目标设置自定义图标

你可以安全地使用SVG图标。该框架包含一个SVG可供测试,若平台不支持SVG,则会添加一个ui-nosvg样式到html元素中去。在你的CSS文件中添加这个样式以提一个PNG图像作为后备

.ui-icon-myicon:after { background-image: url("iconimg.svg"); } /* Fallback */ .ui-nosvg .ui-icon-myicon:after { background-image: url("iconimg.png"); }

图标位置(Icon positioning)

默认情况下,input按钮的图标放在文本的左边。这个默认可能会覆盖使用data-iconpos 属性设置图标的位置"right", "top"或者"bottom"。为了防止链接按钮或按钮元素,你需要添加一个图标位置类(ui-btn-icon-[value])。

Left Right Top Bottom

仅显示图标(Icon-only)

用 "notext"作为图标位置的属性值即可创建一个icon-only按钮。

Delete

图标阴影(Icon shadow)

设置data-iconshadow="true"即可使input按钮有阴影效果,或者添加样式 ui-shadow-iconbutton markup中。

注意:图标阴影(按钮组件中的iconShadow和样式ui-shadow-iconjQuery Mobile 1.4.0弃用,在1.5.0版本中将被完全移除。

Icon shadow Icon shadow

移除图标圆盘(Removing the disc)

图标后的半透明黑圈确保图标图案在任何背景颜色下都有良好的对比度,因此它能够很好地处理jQuery Mobile主题系统。如果你不喜欢个圆盘样式可以通过为元素容器添加 ui-nodisc-icon 移除

No disc No disc

应用于包装类的实例

黑色与白色的图标集(Black vs. white icon sets)

图标在默认情况下是白色的,但是你可以通过对元素或其容器添加ui-alt-icon类切换到黑色的图标。也改变了圆盘背景的颜色

Alt icon Alt icon

应用于包装类的实例

结合反色和无圆盘背景(Combining alt and nodisc)

应用于包装类的实例

将每个列表项的类应用到ULOL使图标变黑色例子。

类被应用到一个折叠组件的例子。

标题(Heading)

我是可折叠的内容。默认情况下我关闭,但你可以点击标题打开我。

I'm the collapsible content. By default I'm closed, but you can click the header to open me.