如何在 jQuery Mobile 拆分按钮列表项的两个按钮上添加图标？

Posted 2023-05-09

【中文标题】如何在 jQuery Mobile 拆分按钮列表项的两个按钮上添加图标？

【英文标题】：How to add icons on both buttons of the jQuery Mobile Split Button List item?

【发布时间】：2015-10-19 01:25:44

【问题描述】：

我正在尝试为聊天应用程序实现联系人列表。 (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/

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

<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>      

那么，如何将两者结合起来，让图标在左侧，拆分按钮在右侧？

【参考方案1】：

我最终没有使用 jQuery Mobile 拆分按钮列表。

<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/