Несколько кнопок разделения в списке jQuery Mobile - PullRequest
Новая
       0

Несколько кнопок разделения в списке jQuery Mobile

5 голосов
/ 15 августа 2011

Можно ли иметь несколько кнопок разделения в списке мобильных устройств jQuery?

Я пытался сделать это: 

<ul data-role='listview'>
    <li>
        <a href='#' id='1'>1</a>
        <a href='#' id='btn1'></a>
        <a href='#' id='btn2'></a>
    </li>
</ul>

Но это не работает.Также не оборачивать ссылки в <div data-role='controlgroup>.Я что-то не так делаю, или это просто невозможно без хака?

ОБНОВЛЕНИЕ : список динамически генерируется с помощью $("#listid).append("<li>...</li>").http://jsfiddle.net/nrpMN/3/.Как указывает mdmullinax ниже, работает следующее: 

<ul data-role='listview'>
    <li>
       <a href='#' id='1'>1</a>
        <div data-role='controlgroup' data-type='horizontal'>
            <a href='#' id='btn1'></a>
            <a href='#' id='btn2'></a>
        </div>
    </li>
</ul>

Спасибо

Ответы [ 3 ]

3 голосов
/ 15 августа 2011

Похоже, что вы хотите, это горизонтальный controlgroup, вложенный в listview.

http://jsfiddle.net/nrpMN/

<ul data-role='listview'>
    <li>
        <div data-role="controlgroup" data-type="horizontal">
            <a href="index.html" data-role="button">Yes</a>
            <a href="index.html" data-role="button">No</a>
            <a href="index.html" data-role="button">Maybe</a>
        </div>
    </li>
</ul>
0 голосов
/ 17 августа 2014

Я думаю, Controlgroup плохо отображается в динамическом просмотре списка.Вы должны сделать полный HTML-код для контрольной группы в динамическом просмотре списка. 

<li>
  <a href='#popupItem' data-rel='popup'>List Text</a>
  <div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div>
</li>
0 голосов
/ 28 ноября 2013

Вот расширение к решению.Проблема с вышеприведенным решением состоит в том, что вы не можете контролировать размещение кнопок с правой стороны элемента списка.Один из способов сделать это - добавить class = 'ui-li-aside' к элементу управления.Это заставит кнопки срабатывать справа, но вам нужно будет отрегулировать область, кроме обложек, по умолчанию она составляет 50%.Вы можете изменить его так, чтобы он не покрывал содержимое вашего списка слева 

.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; }

Или вы можете добавить другой класс 

.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; }

и изменить div для настройки 

<ul data-role='listview'>
    <li>
        <div class='ui-li-aside' data-role="controlgroup" data-type="horizontal">
            <a href="index.html" data-role="button">Yes</a>
            <a href="index.html" data-role="button">No</a>
            <a href="index.html" data-role="button">Maybe</a>
        </div>
    </li>
</ul>
...