jquery mobile - 列表与查看，删除，编辑，复制选项

Question

我想创建列表视图与jquery移动显示项目列表以及每个项目（查看，编辑，删除，复制）的选项。

看到嵌套列表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> 

如果你想在李的按钮，你可以使用一个水平控制组。

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