Как заставить группу кнопок UIKit функционировать как переключатели в форме
Yoothemes UIKit ( http://getuikit.com/) предоставляет способ сделать группу кнопок похожей на переключатели. Смотрите примерно на полпути вниз на этой странице: http://getuikit.com/docs/button.html
Но в документации полностью отсутствует информация о том, как заставить группу кнопок фактически функционировать как переключатели в форме. Благодарен за совет по этому вопросу.
В настоящее время, если я использую их в форме, любая нажатая кнопка отправляет форму. Пример формы для вариантов заказа iphone:
<form>
<div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
<button class="uk-button uk-button-large">16gb</button>
<button class="uk-button uk-button-large">32gb</button>
<button class="uk-button uk-button-large">64gb</button>
</div>
<div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
<button class="uk-button uk-button-large">Space Gray</button>
<button class="uk-button uk-button-large">Gold</button>
<button class="uk-button uk-button-large">Silver</button>
</div>
<button type="submit" class="uk-button uk-button-large uk-button-primary"><i class="uk-icon-magnifier"></i> Review and Order</button>
</form>
1 ответ
Это сработало для меня:
<div class="uk-button-group" data-uk-button-radio>
<label class="uk-button">
<input type="radio" name="gender" value="0" style="display:none;"/>
Male
</label>
<label class="uk-button">
<input type="radio" name="gender" value="1" style="display:none;"/>
Female
</label>
</div>
В качестве альтернативы вы можете сделать что-то вроде этого тоже:
<div class="uk-button-group" data-uk-button-radio>
<label class="uk-button" for="male">Male</label>
<label class="uk-button" for="female">Female</label>
<input type="radio" id="male" name="gender" value="0" style="display:none;"/>
<input type="radio" id="female" name="gender" value="1" style="display:none;"/>
</div>
Надеюсь, поможет.