Multiple buttons on jquery mobile split button list?

Question

Does anyone know how to add multiple buttons (2 split buttons) on a split button list?

There is nothing mentioned in the documentation

http://jquerymobile.com/test/docs/lists/lists-split.html

Adding another <a> tag inside the listview doesn't create multiple split button. It seems to just interpret the last link tag as the split and shows the previous links as normal links/buttons.

Is there a way to accomplish this task?

many thanks.

Answer 1

You can find in the source code.

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
 <li><a href="index.html">
    <img src="images/album-bb.jpg" />
    <h3>Broken Bells</h3>
    <p>Broken Bells</p>
    </a>
    <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a>
 </li>
</ul>

or Use Group Buttons

<div data-role="controlgroup" data-type="horizontal" >
   <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
   <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
   <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>

Ref: http://jquerymobile.com/test/docs/buttons/buttons-grouped.html

Answer 2

Here is an example:

<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="plus" >
<li data-role="list-divider">Enter Score</li>
<li>

    <fieldset class="ui-grid-a">
        <div class="ui-block-a">

            <div data-role="fieldcontain">
             <label for="name">Score:</label>
             <input type="text" name="score" id="score" value="0"  />
            </div>

        </div>

        <div class="ui-block-b">

            <div data-role="controlgroup" data-type="horizontal" >
               <a href="#" data-role="button" data-icon="plus">Plus</a>
               <a href="#" data-role="button" data-icon="minus">Minus</a>
            </div>

        </div>     
    </fieldset>

</li>

Answer 3

<ul data-role="listview" >
<li>

<div class="ui-grid-b">
    <div class="ui-block-a" style="width: 30%;">
        <div data-role="fieldcontain">
            <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">   
        </div>
    </div>

    <div class="ui-block-b" style="width: 60%;">
        <div data-role="fieldcontain">
            <h2>Phoenix</h2>
            <p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
        </div>
    </div>

    <div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
        <div style="float: right;">
            <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
            <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
        </div>
    </div>    
</div>

</li>
</ul>

Please check this JS fiddle.