如何制作一些项目（在列表视图中）已经离开了图标位置

Question

我在here

中有一个列表视图

我尝试使用data-iconpos="left"从项目的右侧到左侧更改图标，但它无效。 如何做到这一点，谢谢

Answer 1

使用jQuery Mobile 1.4，这对我有用，无需其他样式：

<div data-role="page" id="demo-page">
    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true">
            <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-delete">Option 1</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-gear">Option 2</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-info">Option 3</a></li>
        </ul>
    </div>      
</div>

请参阅demo。

Answer 2

我猜1.4中不再支持data-iconpos。

您可以使用CSS：

<ul data-role="listview" data-inset="true" data-divider-theme="a">
    <li class="iconLeft"><a href="#">Inbox</a></li>
    <li><a href="#">Outbox</a></li>
</ul>
.iconLeft a{
    padding-left: 2.5em !important;
    padding-right: 1em !important;
}
.iconLeft a:after{
    right: auto;
    left: 9px;
    transform: scaleX(-1);
}

  

更新了 DEMO

Answer 3

费尔南多是正确的，在1.4以内你可以采取这个解决方案。然而，它确实激怒了我，我们需要将每个类添加到每个锚标记。级联？或定位每个标签。 jQuery mobile中有太多不必要的低级css。更好地定位相关链接，然后在必要时定义任何细节（例如使用data-icon =“home”）。不要误解我的意思，它是一个简单的框架，我使用框架部署了几个应用程序，但它可以更轻松，因此在处理源代码时很容易使用。鉴于此，接受的答案提供了一种解决方法（可以应用父子对更广泛的应用），但上述正确的方法是在1.4版本内工作。

要在上面进行扩展（我知道原始问题适用于一个li，但是说明了我对那些可能正在寻找所有人并保持html光线的人的观点）

<ul data-role="listview" class="iconLeft"><li>....</ul>

我们将类应用于父标记（ul）。 然后使用级联方法（CSS ...线索在名称中）定位该tage及其子项：

.iconLeft li a {background:#ffffff !important;}
.iconLeft li a{
    padding-left: 2.5em !important;
    padding-right: 1em !important;
}
.iconLeft li a:after{
    right: auto;
    left: 9px;
    transform: scaleX(-1);
}

不是我们可以针对所有这些李。我使用这种方法在我的面板上获得了与谷歌Adsense / analytics类似的外观，我觉得它很漂亮。