Несколько кнопок в списке мобильных кнопок jquery?

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>

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

Answer 2

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

Answer 3

Вот пример:

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