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。