Как преобразовать форму радиоввода в форму бутфейсов радиоввода?

Можно ли преобразовать следующий код в метки бутфейсов?

<div class="radio">
    <label><input type="radio" name="optradio"/>Option 1</label>
 </div>
 <div class="radio">
     <label><input type="radio" name="optradio"/>Option 2</label>
 </div>

Благодарю вас!


person Juan Camilo Camacho Beltrán    schedule 16.07.2016    source источник


Ответы (1)


Обновление от 18 июля 2016 г. Вдохновленный вашим вопросом, я начал реализовывать компонент <b:radiobutton />, который является более гибким, чем его стандартный аналог JSF. Оно будет опубликовано со следующей версией BootsFaces — вероятно, 1.0, что связано с JavaOne 2016. А пока следуйте приведенному ниже рецепту.

Мы еще не реализовали <b:radioButton />, но вы можете смоделировать его, добавив скрытое поле ввода и некоторый код JavaScript:

  <b:panel title="Survey" look="primary">
    <p>Which Java version do you use?</p>
    <div class="radio">
      <label onclick="$('.hidden-optradio').val(7)">
        <input type="radio" name="optradio" value="7" />
        Java 7
      </label>
    </div>
    <div class="radio">
     <label onclick="$('.hidden-optradio').val(8)">
        <input type="radio" name="optradio" value="8" />
        Java 8
      </label>
    </div>
    <h:inputText value="#{radiobuttonBean.javaVersion}" styleClass="hidden-optradio" pt:type="hidden" />
    <script>$('input[name=optradio][value=#{radiobuttonBean.javaVersion}]').attr("checked", "checked");</script>
    <b:commandButton value="submit your choice" action="#{radiobuttonBean.submit}" look="primary" />
    <b:messages />
  </b:panel>

Если вам нужен AJAX, реализуйте его, добавив скрытый <b:commandButton update="someRegion" onclick="ajax:myBean.myMethod()" /> и вызовите метод click() этой кнопки в onclick обработчиках меток:

<label onclick="$('.hidden-optradio').val(8);$(.ajax-button).click();">
  <input type="radio" name="optradio" value="8" />
    Java 8
  </label>
</div>
...
<b:commandButton value="submit your choice" 
                 action="#{radiobuttonBean.submit}" look="primary" 
                 update="@form"
                 style-class="hidden ajax-button"
                 />
person Stephan Rauh    schedule 17.07.2016