如何将无线电输入形式转换为无线电输入bootsfaces形式？ [英] How to transform a radio input form to radio input bootsfaces form?

问题描述

 < div class =radio>是否可以将下一个代码转换为bootsfaces标签？ 
< label>< input type =radioname =optradio/>选项1< / label> 
< / div> 
< div class =radio> 
< label>< input type =radioname =optradio/>选项2< / label> 
< / div> 
  

谢谢！

解决方案2016年7月18日更新：启发您的问题，我开始实施< b：radiobutton /> 组件比它的标准JSF组件更灵活。它将与BootsFaces的下一个版本一起发布 - 可能是1.0，这是JavaOne 2016的原因。在此之前，请遵循下面的配方。

我们没有实现< b：radioButton /> 但是，您可以通过添加隐藏的输入字段和一些JavaScript代码来模拟它：

 < b：panel title =Surveylook =primary> 
< p>您使用哪个Java版本？< / p> 
< div class =radio> 
< label onclick =$（'。hidden-optradio'）。val（7）> 
< input type =radioname =optradiovalue =7/> 
 Java 7 
< / label> 
< / div> 
< div class =radio> 
< label onclick =$（'。hidden-optradio'）。val（8）> 
< input type =radioname =optradiovalue =8/> 
 Java 8 
< / label> 
< / div> 
< h：inputText value =＃{radiobuttonBean.javaVersion}styleClass =hidden-optradiopt：type =hidden/> 
< script> $（'input [name = optradio] [value =＃{radiobuttonBean.javaVersion}]'）。attr（checked，checked）;< / script> 
 < b：messages /> 
< / b：面板> 
  

如果您需要AJAX，请通过添加一个隐藏的< b： commandButton update =someRegiononclick =ajax：myBean.myMethod（）/> 并调用此按钮的 click（）方法在标签 onclick 处理程序中： $（ '隐藏optradio。'）VAL（8）; $（Ajax的按钮）。单击（）; >
< input type =radioname =optradiovalue =8/>
Java 8
< / label>
< / div>
...
action =＃{radiobuttonBean.submit}look =primary
update =@ form
style-class =隐藏ajax-button
/>

Is it possible to transform the next code to bootsfaces labels?

<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>

Thank you!

解决方案

Update July 18, 2016: Inspired by your question, I've started to implement a <b:radiobutton /> component that's more flexible than its standard JSF counterpart. It will be published with the next version of BootsFaces - probably 1.0, which is due to JavaOne 2016. Until then, follow the recipe below.

We didn't implement <b:radioButton />yet, but you can simulate it by adding a hidden input field and some JavaScript code:

  <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>

If you need AJAX, implement it by adding a hidden <b:commandButton update="someRegion" onclick="ajax:myBean.myMethod()" /> and call the click() method of this button in the onclick handlers of the labels:

<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"
                 />

这篇关于如何将无线电输入形式转换为无线电输入bootsfaces形式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！