在 jQuery Mobile 列表分隔符内放置一个图标按钮

Question

我想在列表分隔符内放置一个图标，但似乎 jQuery Mobile 允许我将数据图标仅应用于普通列表项，而不是列出具有 data-role='list-divider' 的项目已分配。

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

重点是，我想将信息图标（带有data-icon='info' 或class='ui-icon-info'）放在列表​​分隔符中，同时保持整体风格的一致性，即：

1. 类别以列表分隔符为首，而不是以样式看起来像列表分隔符的列表项为首。
2. 图标显示在右侧，如下面列表项中的箭头所示。图标必须具有与箭头相同的外观风格，这意味着它不应看起来像一个按钮或在其周围有额外的框架。
3. 列表分隔符，或者至少是图标，应该是可点击的，这样用户才能获得关于这个类别的信息。

我希望无需任何 CSS 自定义或 JavaScript 摆弄，仅使用数据属性来实现此目标。

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

1. 带有数据图标的列表项：

   <li data-theme='a' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>

   结果：

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

2. 使用分配了data-role='list-divider' 的列表项：

   <li data-role='list-divider' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>

   结果：

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

3. 内含信息按钮的列表分隔符：

   <li data-role='list-divider'>Category: A<a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'>Category: A</a></li>

   结果：

   • 信息按钮外观错误
     • 按钮有一个边框，为了保持一致性，我想删除它，所以图标显示在它通常的圆盘外观中。删除 data-role='button' 没有帮助，因为按钮根本不会呈现，因此不会显示图标。
     • 图标的位置不在右侧。我知道可以使用data-iconpos='right'，但我已经将此属性用于纯图标 (notext) 布局。
   • 类别外观不令人满意，因为按钮增加了它的高度。即使data-mini='true' 也无济于事。

我知道有十几种简单的方法可以用正常的、较少受 jQuery Mobile 固定的方法来实现，但是在 3 种方法之后，我很想知道如何使用 jQM 来实现。

Answer 1

这个可行，包括点击，我只是测试一下

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

如果图标与其余图标不对齐，请将以下内容添加到样式中

   margin-right: -5px;

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