图标(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]
)。
仅显示图标(Icon-only)
用 "notext"作为图标位置的属性值即可创建一个icon-only按钮。
图标阴影(Icon shadow)
设置data-iconshadow="true"
即可使input
按钮有阴影效果,或者添加样式 ui-shadow-icon
到button markup中。
注意:图标阴影(按钮组件中的iconShadow
和样式ui-shadow-icon
)在jQuery Mobile 1.4.0被弃用,在1.5.0版本中将被完全移除。
移除图标圆盘(Removing the disc)
图标后的半透明黑圈确保图标图案在任何背景颜色下都有良好的对比度,因此它能够很好地处理jQuery Mobile主题系统。如果你不喜欢这个圆盘样式,它可以通过为元素或其容器添加类 ui-nodisc-icon
来移除。
应用于包装类的实例。
黑色与白色的图标集(Black vs. white icon sets)
图标在默认情况下是白色的,但是你可以通过对元素或其容器添加ui-alt-icon
类切换到黑色的图标。这也改变了圆盘背景的颜色。
应用于包装类的实例。
结合反色和无圆盘背景(Combining alt and nodisc)
应用于包装类的实例。
将每个列表项的类应用到UL
或OL
使图标变黑色例子。
类被应用到一个折叠组件的例子。