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

Question

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

有文档

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

添加列表视图内的另一个<a>标签不创建多个拆分按钮只字不提。它似乎只是将最后一个链接标签解释为拆分，并将以前的链接显示为普通链接/按钮。

有没有办法完成这项任务？

非常感谢。

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

请检查this JS fiddle。