Jquery mobile 在jQuery移动列表分隔器中放置一个图标按钮

我想在列表分隔符中放置一个图标，但jQuery Mobile似乎只允许将数据图标应用于普通列表项，而不允许将数据图标应用于分配了

data role='list-divider'

的列表项

简单地说，我希望列表分隔符显示一个信息按钮，用于向用户提供有关此类别的更多信息，如下所示：

重点是，我想将信息图标（带有

数据图标='info'

或

class='ui-icon-info'

）放在列表分隔符中，同时保持整体样式的一致性，即：

该类别的标题是一个列表分隔符，而不是一个样式类似于列表分隔符的列表项

图标显示在右侧，如下面列表项中的箭头所示。图标必须具有与箭头相同的外观样式，这意味着它不应该看起来像按钮或周围有额外的框架

列表分隔符，或者至少是图标，应该是可点击的，这样用户就可以获得关于这个类别的信息

我希望在不进行任何CSS定制或JavaScript篡改的情况下，仅使用数据属性来实现这一点。

这就是我得到的（使用jQuery Mobile 1.3.2）：

带有数据图标的列表项：

结果:

• 信息图标的正确外观
• 类别的外观错误，因为使用的是普通列表项而不是列表分隔符

使用分配了

数据角色='list-divider'

的列表项：

结果:

• 根本没有图标
• 标题外观错误，只有文本超链接，而不是整个列表项

内部带有信息按钮的列表分隔器：

类别：A

结果:

• 信息按钮有错误的外观
  • 这个按钮有一个边框，我想去掉它以保持一致性，所以图标显示在它通常的光盘外观中。删除

    data role='button'

    没有帮助，因为按钮根本不会被渲染，因此不会显示图标
  • 图标的位置不在右侧。我知道可以使用

    data iconpos='right'

    ，但我已经将此属性仅用于图标（

    notext

    ）布局
• 类别外观不美观，因为按钮增加了高度。即使是

  data mini='true'

  也没有帮助

---

我知道有十几种简单的方法可以用普通的、不太jQuery的移动固定方式来实现，但经过三种方法之后，我很想知道如何用jQM实现这一点。

这是可行的，包括单击，我只是测试一下

   <li data-role="list-divider">Test<div onclick='alert("Some info...");' class="ui-icon ui-icon-info" style="color:white;float:right"><div></li>

---

并更改像素大小以匹配其他图标

这就是您要查找的吗？谢谢你的回答@Omar。不幸的是，用户将无法获得有关类别的信息，因为您的示例不包含与列表分隔符或图标交互的可能性，您需要一个按钮，而不仅仅是一个图标。无论如何，这是我用

data role=“button”

所能做的最好的，你可以在我之前的评论中向图标添加更多自定义CSS，使其看起来像一个按钮，并将事件绑定到它。我知道我在这里很挑剔，但使用按钮方法（我在第三种方法中无意中发现了它），图标的外观会发生改变，并且看起来不再与列表项的箭头一致。此外，还将涉及额外的CSS（好吧，不可否认，这不是问题，我只是希望首先找到一种jQM原生方式），但最重要的是，让整个列表分隔符都可以点击，而不仅仅是按钮，这将反映下面可点击列表项的行为。无论如何，我真的很感谢你的努力！谢谢你

   margin-right: -5px;