在jQuery Mobile列表中的左右使用自定义图标 [英] Using custom icons on left and right in jquery mobile list
问题描述
我试图弄清楚如何在列表项的左侧和右侧添加自定义图标.我找到了这个示例(请参见下面的链接和代码)，但是如果您注意到该图标未显示，则只是一个空的圆圈.一开始我以为是因为链接无效，但是我在页面上尝试了自己的图像，但是发生了同样的事情.不幸的是，我的声誉只有13岁，所以我不允许张贴图片，但是这里有一个示例，说明我希望li物品的两端都带有图标.
I'm trying to figure out how to add custom icons on the left and right side of a list item. I found this example (see link and code below) but if you notice the icon does not show up, it's just an empty circle. At first I thought it was because the link was invalid but I tried it on my page with my own image but the same thing happened. Unfortunately I only have a reputation of 13 so I am not allowed to post pictures, however here is a sample of how I would like the li item to have icons on both ends.
-*****************************-
| icon_left TEXT icon_right |
-*********************************-
-*****************************-
| 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/
Code on jsfiddle page http://jsfiddle.net/KYaQT/
推荐答案
jQM 1.0.1相当老，现在已经过时了.您应该升级到1.4和jQuery 1.9或更高版本.
jQM 1.0.1 is quite old and outdated now. You should upgrade to 1.4 and jQuery 1.9 or greater.
<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;
}
对于右边的图标，您采取了正确的方法.在<LI>上设置data-icon属性.在jQM 1.4中，CSS对背景图像使用伪:after元素.
For the icon on the right you had the correct approach. Set the data-icon attribute on the <LI>. In jQM 1.4, the CSS uses the pseudo :after element for the background image.
要在左侧添加图标，可以在文本中插入一个span并添加CSS来放置它.
To add an icon on the left, you can put a span inline with the text and add CSS to position it.
如果您不希望图标后面的灰色磁盘，则将背景色设置为透明:
If you don't want the gray disk behind the icon, set the background color transparent:
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
background-color: transparent;
}
这是 演示
Here is a DEMO
这篇关于在jQuery Mobile列表中的左右使用自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
