Question

<ul data-role= listview></ul>

在jQuery mobile中，上面代码的默认数据图标是 arrow-r 。是否可以更改要删除的默认数据图标？是否也可以在图标上进行 onclick 功能？

Answer 1

您可以通过设置data-icon：

来更改LI元素上的图标

<ul data-role="listview" >
    <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
    <li data-icon="gear"><a href="#">data-icon="gear"</a></li>
    <li data-icon="info"><a href="#">data-icon="info"</a></li>
    <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

如果您想在图标上使用点击处理程序，最好使用拆分按钮。请参阅此处的示例： http://view.jquerymobile.com/1.3.2/dist/demos/widgets/listviews/#list-split

<ul data-role="listview" data-split-icon="delete" data-split-theme="d" data-inset="true">
    <li><a href="#">
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <h2>Warning</h2>
        <p>Hot Chip</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
</ul>

Answer 2

如果要更改所有列表视图项，可以通过两种方式实现。

更改特定列表视图的pagecreate事件的默认图标

$(document).on("pagecreate", "[data-role=page]", function () {
  $(".selector").listview({ icon:"delete" });
});

Demo

在所有列表视图的mobileinit事件中全局更改默认图标这应该在jQuery js库之后和jQuery Mobile js之前加载。
```
$(document).on("mobileinit", function () {
  $.mobile.listview.prototype.options.icon = "delete";
});
```
<强> Demo

更改listview图标JQM

2 个答案: