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

Question

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

简单地说，我希望list-divider显示一个信息按钮，为用户提供有关此类别的更多信息，如下所示：

关键是，我想将信息图标（data-icon='info'或class='ui-icon-info'）放在list-divider中，同时保持整体风格的一致性，即：

1. 该类别由list-divider引导，而不是仅仅被设计为类似于列表分隔符的list-item。
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>

   

   结果：

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

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;

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