Question

无法相信我正在努力完成这项简单的任务。将jQuery Mobile数据图标放在用户不与之交互的元素上的正确方法是什么？如果我想要一个只向用户显示消息的段落，例如“找不到合适的批次”，并且我希望该元素具有“信息”图标，该怎么办？

我知道这不会做，但是像：

<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>

不是链接。不是按钮或复选框或....只是一个显示消息的普通旧框？我看到的所有示例都是交互元素，而不是静态元素。

提前致谢。

Answer 1

我这样做是通过添加带有一些CSS的span，如下所示：

<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>

然后inlineIcon类有这些规则来放置图标：

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

右边距控制图标和文字之间的空间。

如果您更喜欢黑色图标，后面没有灰色磁盘：

<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>

.inlineIconNoDisk {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}
.inlineIconNoDisk:after {
    background-color: transparent;
}

跨度上的

ui-alt-icon会更改图标颜色，并且{after}元素会隐藏磁盘上的background-color: transparent;。

这是 DEMO

将图标放在简单文本的元素上

1 个答案: