Multiple split buttons on jQuery Mobile list

Is it possible to have multiple split buttons in a jQuery mobile list?

I've tried doing this:

开发者_如何学Go

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

But it doesn't work. Neither does wrapping the links in a <div data-role='controlgroup>. Am I doing something wrong, or is it just not possible without a hack?

UPDATE: The list is dynamically generated by doing $("#listid).append("<li>...</li>"). http://jsfiddle.net/nrpMN/3/ . As pointed out by mdmullinax below, the following does work:

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

Thanks

---

Sounds like what you want is a horizontal controlgroup nested in a 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>

---

Here is extension to the solution. Problem with above solution is that you cannot control the placement of buttons on the right side of the list item. One way to do it is add class='ui-li-aside' to the control. That will make the buttons come on right, but you will have to adjust the area which aside covers, by default it is 50%. You can modify it to reduce it so that it does not cover your list content on left

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

Or you can add another class

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

And change the div to adjust the

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

---

I think, Controlgroup not rendered well in dynamic listview. You should make complete html code for controlgroup in dynamic listview.

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