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。

jquery移动分裂按钮列表上的多个按钮？

3 个答案: