jquery mobile拆分按钮列表上有多个按钮？

Question

有谁知道如何在拆分按钮列表上添加多个按钮（2 个拆分按钮）？

文档中没有提到任何内容

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

在列表视图中添加另一个 标记不会创建多个拆分按钮。它似乎只是将最后一个链接标记解释为拆分，并将前面的链接显示为正常链接/按钮。

有办法完成这个任务吗？

非常感谢。

Answer 1

你可以在源代码中找到。

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

或者
使用组按钮

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

参考：http://jquerymobile.com/test/docs/buttons/按钮-grouped.html

Answer 2

这是一个例子：

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

请检查这个JS小提琴。