Question

我想在listview中使用我自己的箭头图像。我应该在哪里以及如何更改jquery移动默认灰色圆圈箭头？我应该覆盖jquery css类吗？我正在使用jquery-mobile 1.1.0RC。我的html代码列表项：

        <ul data-role="listview" id="list_id"> </ul>

还有我的javascript代码，我正在动态添加列表项：

var ap = "<li data-corners=\"false\" data-shadow=\"false\" data-iconshadow=\"true\" data-inline=\"false\" data-wrapperels=\"div\" data-icon=\"images/next.png\" data-iconpos=\"right\" data-theme=\"a\" class=\"ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c\"><div class=\"ui-btn-inner ui-li\"><div class=\"ui-btn-text\"><a href=\"index.html\" class=\"ui-link-inherit\">"+
    "<img src=\"test_thumb.jpg\" class=\"ui-li-thumb\">"+
"<h3 class=\"ui-li-heading\">Big text</h3>"+
"<p class=\"ui-li-desc\">Smaller text</p>"+
"</a></div><span class=\"ui-icon ui-icon-arrow-r ui-icon-shadow\">&nbsp;</span</div</li>";

$('#list_id').append(ap);
$('#list_id').listview('refresh');

正如您所看到的，我已尝试将data-icon属性更改为我自己的图像源，但它不起作用。对不起，如果问题太明显，我是css和jquery框架的新手，所以任何帮助将不胜感激。谢谢！

Answer 1

要使用自定义图标，请指定具有唯一名称的数据图标值   像myapp-email和按钮插件将生成一个类   将ui-icon-添加到数据图标值前面并将其应用于按钮：   UI图标-MyApp的电子邮件。

然后，您可以在样式表中编写一个CSS规则来定位   ui-icon-myapp-email类用于指定图标背景源。至   与其余图标保持视觉一致性，创建白色   图标18x18像素保存为具有Alpha透明度的PNG-8。

在这个例子中，我们只是指向一个独立的图标图像，但是   您可以轻松使用图标精灵并指定   相反，定位，就像我们在中使用的图标精灵   框架。
.ui-icon-myapp-email {
  background-image: url("app-icon-email.png");
}

是的，请查看我的复制和粘贴技巧。 http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Answer 2

您可以创建一个使用自定义图像的新类，并将其应用于将使用它的移动网站中的所有元素。

或者替换jQuery图标图像本身，我相信它们位于名为 images 的目录中。

如果您在此之后仍然感到困惑，请尝试阅读安迪·马修斯的easy to follow tutorial。：）

自定义listview项目的ui-icon箭头

2 个答案: