Question

我正在尝试为聊天应用程序实现联系人列表。（jQuery 2.1.0，jQuery Mobile 1.4.2）

我从下面的代码开始，它在联系人项目的左侧给我一个图标。（用于显示状态。）

<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-check">Item 1</a></li>
  </ul>
</div>

JSFiddle：http://jsfiddle.net/ud8j92he/

现在，我想扩展它并使用拆分按钮列表在右侧添加一个按钮来编辑/删除联系人。

<div role="main" class="ui-content">
  <ul data-role="listview" data-inset="true" data-split-icon="edit" data-split-theme="c">
    <li>
      <a href="#">Item 1</a> 
      <a href="#">Edit</a> 
    </li>
  </ul>
</div>

JSFiddle：http://jsfiddle.net/b84zuf6w/

但是使用拆分按钮列表，我无法在第一个按钮的左侧添加图标。如果我使用＆＃39; ui btn＆＃39;使用拆分按钮列表，它会覆盖并且我没有得到右侧的编辑按钮。

<div role="main" class="ui-content">
  <ul data-role="listview" data-inset="true" data-split-icon="edit" data-split-theme="c">
    <li>
      <a href="#" class="ui-btn ui-btn-icon-left ui-icon-check">Item 1</a> 
      <a href="#">Edit</a> 
    </li>
  </ul>
</div>

那么，我如何将两者结合起来，左边有一个图标，右边是分割按钮？

Answer 1

我最终没有使用jQuery Mobile Split Button List。

<div role="main" class="ui-content">
  <ul data-role="listview" data-inset="true">
    <li class="ui-li-has-alt">
      <a href="#" class="ui-btn ui-btn-icon-left ui-icon-check">Item 1</a> 
      <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit ui-btn-c" title="Edit"></a> 
    </li>
  </ul>
</div>

JSFiddle：https://jsfiddle.net/1k3d0uee/

如何在jQuery Mobile Split Button List项的两个按钮上添加图标？

1 个答案: