Question

我试图弄清楚如何在列表项的左侧和右侧添加自定义图标。我找到了这个例子（见下面的链接和代码），但是如果你注意到图标没有显示，那么它只是一个空白的圆圈。起初我以为这是因为链接无效但我在我的页面上尝试了我自己的图像，但同样的事情发生了。不幸的是，我只有13的声誉所以我不允许发布图片，但这里有一个示例，我希望li项目的两端都有图标。

- ******** -
| icon_left TEXT icon_right |
- ******** -

<html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.ui-icon-myapp-smiley {
background-image: url(http://swiftthemes.com/forums/images/icons/icon6.png) !important;
}
</style>
<div data-role="page">
  <div data-role="content">
    <ul data-role="listview">
        <li data-icon="myapp-smiley"><a href="#">My LI!!!</a></li>
    </ul>
  </div>
</div>
</html>

jsfiddle页面上的代码http://jsfiddle.net/KYaQT/

Answer 1

jQM 1.0.1现已相当陈旧且过时。你应该升级到1.4和jQuery 1.9或更高版本。

<ul data-role="listview" data-inset="true" >
    <li data-icon="myicon"><a href="#"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Text in list item 1</a></li>
</ul>

.ui-icon-myicon:after {
    background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
    background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

对于右侧的图标，您有正确的方法。在data-icon上设置<LI>属性。在jQM 1.4中，CSS使用伪：after元素作为背景图像。

要在左侧添加图标，您可以将跨度与文本内联，并添加CSS以定位它。

listItem icons right and left

如果您不想要图标后面的灰色磁盘，请将背景颜色设置为透明：

.ui-icon-myicon2:after {
    background-image: url("http://forum.librecad.org/images/gear.png");
    background-color: transparent;
}

这是 DEMO

在jquery移动列表中左右使用自定义图标

1 个答案: