jquery mobile - 具有查看、删除、编辑、复制选项的列表

Question

我正在尝试使用 jquery mobile 创建列表视图，显示项目列表以及每个项目的选项（查看、编辑、删除、复制）。

看到嵌套列表是deprecated，最简洁的实现方式是什么？

理想情况下，希望将选项放在一行中，以免占用太多空间。

Answer 1

一种选择是使用拆分按钮列表视图。当您单击/点击拆分按钮时，会出现一个弹出窗口，其中包含您可以执行的操作：

DEMO FIDDLE

<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
  <li>
    <a href="#"></a>
    <h2><a href="#">Item 1</a></h2>
    <p><a href="#">Item 1 description</a></p>
    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
  </li>
</ul>

<div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="c">
        <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
            <li data-role="divider" data-theme="e">Choose an action</li>
            <li><a href="#">View details</a>
            </li>
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">Delete</a>
            </li>
            <li><a href="#">Copy</a>
            </li>
            <li data-theme="a"><a data-rel="back" href="#">Cancel</a>
            </li>
        </ul>
    </div>

如果你想要 LI 中的按钮，你可以使用水平控制组。

DEMO FIDDLE

<li>
    <h2>Item 1 - this is a list item</h2>
    <p data-role="controlgroup" data-type="horizontal" data-mini="true">
        <button>View</button>
        <button>Edit</button>
        <button>Delete</button>
        <button>Copy</button>
    </p>
</li>

li p {
    text-align: right;
}