jquery - 带有编辑和删除选项的 Jquery 移动列表视图拆分按钮

Question

是否可以在 jquery mobile listview 中的行按钮中放置一些操作/选择？

这是我尝试过的代码，但它不起作用。我不知道这是否可以做到？

<ul data-role="listview" data-split-icon="gear">
  <li>
    <a href="/somewhere/">Somewhere description</a>
    <div data-role="controlgroup" data-type="horizontal">
      <a href="/somewhere/delete/">ble</a>
      <a href="/somewhere/delete/">Delete</a>
    </div></li>
  </li>
</ul>

有两个选项我会觉得很有帮助。- 2 个图标（删除和编辑图标）而不是一个“齿轮”图标）或 - 一个启动选择（编辑/删除）的图标或某种带有 2 个选项的对话框。

Answer 1

try

<ul data-role="listview" data-split-theme="a" data-inset="true">
    <li>
        <div class="ui-grid-a" >

            <div class="left-li ui-block-a "  >
                <h3>xxxxx xxx xxxx x xx xxxxx xxx xxxx x xx</h3>
            </div>
            <div class="right-li ui-block-b "   >
                <a class="ui-shadow ui-btn ui-corner-all ui-icon-edit ui-btn-icon-notext ui-btn-inline">Button</a>
                <a class="ui-shadow ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-inline">Button</a>
            </div>


        </div>
    </li>
    </ul>

<style>
.right-li {
    text-align: right;
}
.left-li {

}

.ui-grid-a>.ui-block-a{
width:75%;
}

.ui-grid-a>.ui-block-b {
width:25%;

}

</style>

Note I am using jquery mobile 1.4.3.