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