<f: selectItems> JSF custom tag attributo tooltip

Question

E 'possibile aggiungere un attributo "title" al tag in JSF, per esempio:

<f:selectItems value="#{foo.fooList}" title="{foo.fooDescription}"/> 

HTML generato:

<select> 
    <option value="foo1" title="description1">foo ex1</option> 
    <option value="foo2" title="description2">foo ex2</option> 
</select> 

Answer 1

Non ho una soluzione elegante, ma può essere eseguita. Sto assumendo JSF 2+ & Facelets VDL.

Per un bean gestito Foo:

@ManagedBean @RequestScoped 
public class Foo { 
    private List<SelectItem> fooList = Arrays.asList(
      new SelectItem("value1", "label1", "description1"), 
      new SelectItem("value2", "label2", "description2")); 

    public List<SelectItem> getFooList() { 
    return fooList; 
    } 
} 

È possibile utilizzare JavaScript per impostare l'attributo title sul nodo DOM:

<h:selectOneMenu binding="#{requestScope.fooSelectOne}"> 
    <f:selectItems value="#{foo.fooList}" /> 
</h:selectOneMenu> 
<script> 
(function() { 
    var selectName = '#{requestScope.fooSelectOne.clientId}'; 
    var kids = document.getElementsByName(selectName)[0] 
        .getElementsByTagName("option"); 
    var index = 0; 
    <ui:repeat value="#{foo.fooList}" var="_opt"> 
    kids[index++].title = '#{_opt.description}'; //TODO: escape this 
    </ui:repeat> 
}()); 
</script> 

Answer 2

Penso che per il tag f:selectItems non ci sia attributo (title) disponibile. Si dispone di questo attributo nel tag option normale in HTML ma non in jsf. Penso che dovresti usare il semplice tag select anziché selectOneMenu per ottenere il valore title.

Answer 3

Assumete il vostro <h:selectOneMenu è come sotto.

<h:form id="myForm"> 
    <h:selectOneMenu id="myCombo"> 
    <f:selectItems value="#{foo.fooList}"/> 
    </h:selectOneMenu> 
</h:form> 

Ora a window.onload si può scorrere option s e aggiungere la title come di seguito

<script> 
    window.onload = function() { 
     var options = document.getElementById("myForm:myCombo").options; 
     for(var i = 0; i &lt; options.length; i++) { 
      options[i].title = "description" + i; 
     } 
    } 
</script> 

Answer 4

attributo itemDescription non apparirà nella cucitura 2.2.

La soluzione migliore sarebbe utilizzare javascript per mostrare suggerimenti per ciascun elemento selezionato.

<script type="text\javascript"> 
 
    function getTooltip(id){ 
 
    var options = document.getElementById(id).options; 
 
     for(var i = 0; i &lt; options.length; i++) { 
 
      options[i].title = "description" + i; 
 
     } 
 
    } 
 
</script>

Se l'ID viene generata dinamicamente o altro modo, per esempio.

<rich:dataTable value="#{mybean.list}"> 
    <h:selectOneMenu value="#{mybean.selectedValue}" onmouseover=getTooltip(this.id)> 
    <f:selectitems value="#{mybean.selectlist}"> 
    </h:selectOneMenu> 
</rich:datatable> 

Questa soluzione funziona per tutti gli ID generati in modo dinamico e semplice

Answer 5

Per generare un attributo title sul tuo generato options, si può semplicemente utilizzare passthrough attributi come questo:

<f:selectItems value="#{values}" p:title="Your title here"/>