Botones divididos múltiples en la lista de jQuery Mobile

Question

¿Es posible tener varios botones divididos en una lista de dispositivos móviles jQuery?

He intentado hacer esto:

<ul data-role='listview'> 
    <li> 
     <a href='#' id='1'>1</a> 
     <a href='#' id='btn1'></a> 
     <a href='#' id='btn2'></a> 
    </li> 
</ul> 

Pero no funciona. Tampoco empaqueta los enlaces en un <div data-role='controlgroup>. ¿Estoy haciendo algo mal, o simplemente no es posible sin un truco?

ACTUALIZACIÓN: La lista se genera dinámicamente haciendo $("#listid).append("<li>...</li>"). http://jsfiddle.net/nrpMN/3/. Como ha señalado mdmullinax a continuación, la siguiente funciona:

<ul data-role='listview'> 
    <li> 
     <a href='#' id='1'>1</a> 
     <div data-role='controlgroup' data-type='horizontal'> 
      <a href='#' id='btn1'></a> 
      <a href='#' id='btn2'></a> 
     </div> 
    </li> 
</ul> 

Gracias

Answer 1

Suena como lo que quiere es una horizontal controlgroup anidado en una listview.

http://jsfiddle.net/nrpMN/

<ul data-role='listview'> 
    <li> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="index.html" data-role="button">Yes</a> 
      <a href="index.html" data-role="button">No</a> 
      <a href="index.html" data-role="button">Maybe</a> 
     </div> 
    </li> 
</ul> 

Answer 2

Aquí es la extensión a la solución. El problema con la solución anterior es que no puede controlar la ubicación de los botones en el lado derecho del elemento de la lista. Una forma de hacerlo es agregar class = 'ui-li-aside' al control. Eso hará que los botones se vean bien, pero tendrá que ajustar el área que cubre, de manera predeterminada es 50%. Puede modificarlo para reducirlo de manera que no cubre el contenido de su lista de la izquierda

.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; } 

o puede agregar otra clase

.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; } 

Y cambiar el div para ajustar el

<ul data-role='listview'> 
    <li> 
     <div class='ui-li-aside' data-role="controlgroup" data-type="horizontal"> 
      <a href="index.html" data-role="button">Yes</a> 
      <a href="index.html" data-role="button">No</a> 
      <a href="index.html" data-role="button">Maybe</a> 
     </div> 
    </li> 
</ul> 

Answer 3

Creo que Controlgroup no se procesó correctamente en la vista de lista dinámica. Debería crear un código html completo para controlgroup en la vista de lista dinámica.

<li> 
    <a href='#popupItem' data-rel='popup'>List Text</a> 
    <div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div> 
</li>