Jquery mobile listview splitbutton with edit & delete options

Question

Is it possible to put some action/select in the button of the row in jquery mobile listview?

Here's the code I tried but it doesn't work. I have no idea if this can be done ?

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

There are two options I would find helpful. - 2 icons (delete & edit icon) instead of one "gear" icon) or - one icon which inits select (edit/delete) or some kind of dialog with 2 options to select.

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.