在JSF中为下拉元素添加工具提示

时间:2016-11-03 06:43:37

标签: jsf

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >

    <h:body>



        <h1>JSF 2  example</h1>

        <h:form id="form1">

            <h3>
                <h:outputText value="#{msg['welcome.jsf']}" />
            </h3>


            <h:panelGrid columns="2">

                Language : 
                <h:selectOneMenu id="combo1" value="#{language.localeCode}" onchange="submit()"
                    valueChangeListener="#{language.countryLocaleCodeChanged}">

                <f:selectItems value="#{language.countriesInMap}" title="#{language.localeCode}" />

                </h:selectOneMenu>

            </h:panelGrid>


        </h:form>

        <h:form id="form11">

            <h:panelGrid columns="2">

                Language : 
                <h:selectOneMenu id="combo11" value="#{language.localeCode}" onchange="submit()"
                    valueChangeListener="#{language.countryLocaleCodeChanged}">

                <f:selectItems value="#{language.countriesInMap}" title="#{language.localeCode}" />

                </h:selectOneMenu>

            </h:panelGrid>


        </h:form>
        <script>
    window.onload = function(var var1,var var2) {
        var var1="form1";
        var var2="combo1";

         var options = document.getElementById(var1+":"+var2).options;
         for(var i = 0; i &lt; options.length; i++) {
                     options[i].title = "#{msg['welcome.jsf']}";
         }
    }   
    </script>
    </h:body>
</html>

我正在使用上面的xhtml代码创建两个下拉列表。 使用上面的JavaScript函数,我可以为第一个下拉元素创建工具提示。 为了为第二个下拉元素创建工具提示,我需要通过将表单的id和selectItems作为参数传递给函数来调用上面的JS函数。 我怎么能这样做?

2 个答案:

答案 0 :(得分:0)

如果您使用的是JSF 2.2,则可以使用passthrough,因此您根本不需要使用javascript:

<html xmlns="http://www.w3.org/1999/xhtml"   
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<!-- your other code -->

Language : 
    <h:selectOneMenu id="combo1" value="#{language.localeCode}" onchange="submit()" valueChangeListener="#{language.countryLocaleCodeChanged}">      
           <c:forEach value="#{language.countriesInMap}" var="language"> 
                 <f:selectItem itemLabel="#{language.countriesInMap}" itemValue="#{language.localeCode}" pt:title="#{msg['welcome.jsf']}"/>    
           </c:forEach>
    </h:selectOneMenu>    
</h:panelGrid>

<!--...second menu like the first one -->

答案 1 :(得分:0)

通过使用&#34; title&#34;修改上述代码可以实现上述目的。 selectonemenu标签中的标签如下:

 <h:selectOneMenu *title="#{language.countriesInMap}"* id="combo1" value="#{language.localeCode}" onchange="submit()"
                    valueChangeListener="#{language.countryLocaleCodeChanged}">

                <f:selectItems value="#{language.countriesInMap}"  />

                </h:selectOneMenu>