it-roy-ru.com

Кнопки Twitter Twitter Bootstrap Кнопки управления групповыми переключателями/флажки

Я пытаюсь использовать группу кнопок Twitter Bootstrap в качестве фактического набора элементов управления вводом формы. По умолчанию эти группы кнопок можно настроить так, чтобы они работали как переключатели или группы флажков, но, поскольку они используют элемент <button>, их нельзя использовать как переключатели или флажки.

В своем исследовании я обнаружил этот сайт который использует CSS, чтобы эти кнопки начальной загрузки фактически управляли переключателями и флажками. Единственная проблема заключается в том, что они используют относительно недавние функции CSS для работы, и, следовательно, требуют IE9 или выше для работы.

Я хотел бы расширить поддержку IE8. Есть ли другое (возможно, JS-контролируемое) решение, которое предложило бы те же функции, что и приведенная выше ссылка, без высоких требований CSS?

Спасибо за ваше время.

47
Oliver Spryn

Bootstrap 3 имеет «нативное» решение ...

Теперь есть «истинное» решение Bootstrap для этой проблемы, которое, похоже, прекрасно работает и в старых браузерах. Вот как это выглядит:

// get selection
$('.colors input[type=radio]').on('change', function() {
    console.log(this.value);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="btn-group colors" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
  </label>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Смотрите соответствующую документацию Bootstrap для получения дополнительной информации.

Bootstrap 4

Bootstrap 4 поддерживает компонент так же, как Bootstrap 3 , но Bootstrap 4 не поддерживает IE9 . Возможно, вы захотите проверить Bootstrap IE8 проект.

132
maciek

Bootstrap 2

Попробуйте это скрипка

HTML:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>

Сценарий:

$(".btn-group button").click(function () {
    $("#buttonvalue").val($(this).text());
});

затем получите buttonvalue на стороне сервера

23
Eonasdan

С помощью Bootstrap 3.2 поместите скрытый ввод в середину контейнера группы кнопок. Вместо текстового содержимого мы берем значение поля data-value.

<div id="test" class="btn-group checkit" data-toggle="buttons-radio">
    <button type="button" data-value="1" class="btn btn-default active">Yes</button>
    <input type='hidden' name="testfield" value='1'>
    <button type="button" data-value="0" class="btn btn-default ">No</button>
</div>

Теперь вставьте небольшой фрагмент кода JavaScript в часть загрузки вашего шаблона.

$('.checkit .btn').click(function() {
    $(this).parent().find('input').val($(this).data("value"));
});

Так что вам нужно только добавить .checkit к вашей группе кнопок и вставить скрытое поле ввода.

В bootstrap 3.2 вы можете использовать группы кнопок напрямую с радио- или чекбокс-входами

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="options" id="option1" value="1" /> Yes
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2" value="0" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3" value="42" /> Whatever
    </label>
</div>

Смотрите здесь: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

4
RubbelDeCatc

Вы можете использовать скрытые элементы формы и JavaScript, чтобы использовать состояние кнопки для запуска состояний элемента формы.

0
BahamutWC

Решение только для CSS:

HTML:

<div class="btn-group">
    <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
    <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
</div>

SCSS/МЕНЬШЕ:

 label.btn {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;

    span {
      display: block;
      padding: 10px 15px;
    }

    input[type=checkbox] {
      display: none;
    }

    input:checked + span {
      display: block;
      color: #fff;
      background-color: #285e8e;
    }
  }

JSfiddle здесь

0
oboshto