JQuerymobile ввода текста с переключателями
Вот мое демо http://jsfiddle.net/PZGQp/3/
В "группе 1" у меня есть радиогруппа в качестве вертикальной контрольной группы.
Я пытаюсь поместить текстовое поле справа от каждого переключателя - как в "группе 2" (код ниже).
Возможно ли это сделать, сохранив поведение контрольной группы для переключателей - если они не имеют закругленных, а не прямоугольных углов на переключателях?
<fieldset data-role="controlgroup" data-theme="b">
<table width="100%">
<tr>
<td width="80%"><input type="radio" id="radio-1" value="" class="radioclass" />
<label for="radio-1">1</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
<tr>
<td width="80%"><input type="radio" id="radio-2" value="" class="radioclass" />
<label for="radio-2">2</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
<td width="80%"><input type="radio" id="radio-3" value="" class="radioclass" />
<label for="radio-3">3</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
</table>
</fieldset>
1 ответ
Решение
Надеюсь, я вас правильно понял.
Рабочий пример jsFiddle: http://jsfiddle.net/Gajotres/uwq8b/
HTML используется:
<div class="ui-grid-a">
<div class="ui-block-a">
<fieldset data-role="controlgroup" data-theme="a">
<input type="radio" id="radio-1" name="radio-1" value="" class="radioclass" />
<label for="radio-1">1</label>
<input type="radio" id="radio-2" name="radio-1" value="" class="radioclass" />
<label for="radio-2">2</label>
<input type="radio" id="radio-3" name="radio-1" value="" class="radioclass" />
<label for="radio-3">3</label>
</fieldset>
</div>
<div class="ui-block-b">
<input type="text" placeholder="Qty" id="qty"/>
<input type="text" placeholder="Qty" id="qty"/>
<input type="text" placeholder="Qty" id="qty"/>
</div>
</div><!-- /grid-a -->
CSS используется:
.ui-block-a {
width: 80% !important;
padding-top: 0.5em;
}
.ui-block-b {
width: 20% !important;
padding-top: 0.5em;
}
fieldset.ui-controlgroup {
margin: 0 !important;
}
div.ui-input-text {
margin: 0 0 0.3em 0 !important;
}