JQuery 带拆分按钮的移动列表视图

Question

我正在使用 JQM 列表视图，它工作正常 Fig. 1 ，代码如下：

<ul data-role="listview" data-inset="true" data-split-icon="gear">
  <li>
    <a href="#">
      <h3>Button A</h3>
      <p>Button A</p>
    </a>
    <a href="#">Set Button A</a>
  </li>
  <li>
    <a href="#">
      <h3>Button B</h3>
      <p>Button B</p>
    </a>
    <a href="#">Set Button B</a>
  </li>
  <li>
    <a href="#">
      <h3>Button C</h3>
      <p>Button C</p>
    </a>
    <a href="#">Set Button C</a>
  </li>
</ul>

我正在尝试为按钮 B 和按钮 C 使用一个拆分按钮，如 Fig. 2。
代码如下：

<ul data-role="listview" data-inset="true" data-split-icon="gear">
  <li>
    <a href="#">
      <h3>Button A</h3>
      <p>Button A</p>
    </a>
    <a href="#">Set Button A</a>
  </li>
  <li>
    <a href="#">
      <h3>Button B</h3>
      <p>Button B</p>
      </br>
      <h3>Button C</h3>
      <p>Button C</p>
    </a>
    <a href="#">Set Button B and C</a>
  </li>
</ul>

是否可以像图1一样用图2中的线将"Button B"和"Button C"分开，只用一个拆分按钮？

Answer 1

我有一个快速而肮脏的解决方案，可能适用于您的情况。将 </br> 替换为

<div class="separator"></div>

样式如下：

.separator
{
    border-top: 1px solid lightgray;
    margin: 0px;
    position: relative;
    left: -50px;
    width: 200%;
}

如果列表视图是动态生成的，您必须以编程方式实现它。

JQuery 带拆分按钮的移动列表视图

JQuery Mobile listview with split button

listview

split-button

jquery-mobile