Радио Группа кнопок с кнопкой на правом конце

Question

Я новичок в JQuery, я застрял с одной проблемой

Возможные Дублировать

jQuery Mobile buttons on same row as controlgroup Но Предложенное решение не работает для меня.

Я пытаюсь создать группу радиоуправления, используя jqm с кнопкой на правой стороне. Я создаю радиокнопки. как это: -

<fieldset data-role="controlgroup" id="privacylistdata" 
       data-theme="c" class="ui-grid-a"> 

       <label for="Setting1">Setting1</label> <input class="privacytype" 
        type="radio" name="privacy" id="Setting1" 
        value="Setting1"> 

        <label for="Setting2">Setting2</label> <input 
        class="privacytype" type="radio" name="privacy" 
        id="Setting2" value="Setting2"> 

        <label for="Setting3">Setting3</label> <input 
        class="privacytype" type="radio" name="privacy" 
        id="Setting3" 
        value="Setting3"> 
      </fieldset> 

Я хотел бы добавить кнопку на правой стороне большей каждой контрольной группы радио в той же строке, как это.

Пожалуйста, помогите мне.

Спасибо.

Answer 1

Один из способов сделать это, чтобы иметь в controlgroups бок о бок с помощью таблицы:

<table class="privacylistdatatable"> 
     <tr> 
      <td> 
       <fieldset data-role="controlgroup" id="privacylistdata" data-theme="c"> 
        <label for="Setting1">Setting1</label> 
        <input class="privacytype" type="radio" name="privacy" id="Setting1" value="Setting1"> 
        <label for="Setting2">Setting2</label> 
        <input class="privacytype" type="radio" name="privacy" id="Setting2" value="Setting2"> 
        <label for="Setting3">Setting3</label> 
        <input class="privacytype" type="radio" name="privacy" id="Setting3" value="Setting3"> 
       </fieldset> 
      </td> 
      <td class="rightColumn"> 
       <fieldset data-role="controlgroup" id="privacylistdataBtns" data-theme="c"> 
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Icon only</a> 
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Icon only</a> 
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Icon only</a> 
       </fieldset> 
      </td> 
     </tr> 
    </table> 

Затем использовать некоторые CSS, чтобы сделать вещи выстраиваться красиво:

.privacylistdatatable { 
    width: 100%; 
    border-spacing: 0; 
    border-collapse: collapse; 
} 
.privacylistdatatable td { 
    padding: 0px; 
} 
.privacylistdatatable .rightColumn { 
    width: 24px; 
} 
.privacylistdatatable fieldset { 
    margin: 0; 
} 
#privacylistdata .ui-radio label { 
    border-top-right-radius: 0 !important; 
    border-bottom-right-radius: 0 !important; 
} 
#privacylistdataBtns .ui-btn { 
    border-top-left-radius: 0 !important; 
    border-bottom-left-radius: 0 !important; 
    border-left: 0 !important; 
} 
#privacylistdataBtns .ui-btn-inner { 
    padding-top: 9px; 
    padding-bottom: 9px; 
} 
#privacylistdataBtns .ui-last-child .ui-btn-inner { 
    padding-top: 9px; 
    padding-bottom: 9.5px; 
} 

DEMO