自定义列表视图项目的UI图标箭头

我想使用我自己的箭头图像列表视图中的项目。在哪里以及如何更改jquery mobile默认的灰色圆圈箭头？我应该重写jQuery css类吗？我正在使用jquery-mobile 1.1.0RC。有列表项我的html代码：自定义列表视图项目的UI图标箭头

 <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');

正如你可以看到我已经试图改变数据 - 图标属性到我自己的图像源，但它不起作用。对不起，如果问题太明显，我是新手在CSS和jQuery框架，所以任何帮助将不胜感激。谢谢！

来源

2012-03-26 Mario

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

或者替换jQuery图标图片本身，我相信他们在一个名为的图片。

如果你之后仍停留，尝试阅读本easy to follow tutorial安迪·马修斯。:)

来源

2012-03-26 07:53:44 Kyle

+1教程 – SKT 2012-11-26 13:32:59

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

然后，您可以在样式表中编写一个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

来源

2012-03-26 08:12:12 codaniel

自定义列表视图项目的UI图标箭头

回答

相关问题