0

我正在使用 JSF，并且我有一个 h:selectOneMenu，它使用来自支持 bean 的 f:selectItems 填充。我想为 h:selectOneMenu 中的每个选项显示一条有用的消息。该消息也将来自 bean，并且每个选项都不同。我想在用户在选项之间导航时以及在选择他想要的选项之前这样做。这个想法是帮助用户决定选择什么。换句话说，我想要一些与组件的“title”属性非常相似但比这更花哨和强大的东西。具体来说，我想要一个小的弹出窗口，它允许无限数量的字符。这可能吗？您对如何进行有任何想法吗？是否有任何 JSF 库可以帮助我做到这一点？

我在 jsf 中为每个 SelectOneMenu Items找到了这个链接ToolTip，但这对我没有帮助，因为首先它使用了“title”属性，其次消息不是来自支持 bean。

提前致谢！

4

1 回答 1

0

正如 BalusC 所提到的，您可以只使用 Primefaces，这是使用PowerTip jQuery 插件的示例代码：

<p:selectOneMenu id="users"  converter="userConverter"  var="u">
<f:selectItems value="#{userManagedBean.users}" var="user" itemLabel="#{user.firstName}" itemValue="#{user}"/>  
<p:column >  
     <span customData="#{u.emailOrAnyOtheInfoYouWantToDisplayInTooltip}" class="aClassForTooltips">
        <h:outputText value="#{u.firstName} - #{u.lastName}" /> 
    </span>
</p:column>

在 jQuery 部分：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h:outputScript name="js/jquery.powertip.min.js" />
<script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function () {    
        jQuery('.aClassForTooltips').each(function(){ 
               var elementToH = jQuery(this),
               data = elementToH.attr('customdata').replace(/%20/g,' ');
               elementToH.data('powertip', function() {
                    return '<div style="background-color:black;width:200px;height:25px">'+data+'.</div>';
            });
            ///////
            elementToH.powerTip({
                placement: 'ne' // north-east tooltip position
            });
            //////
    });     
});

span注意元素 中自定义属性的使用。如果与任何 JSF 组件一起使用，则 JSF 渲染器会忽略此属性，这就是您需要 span 的原因。
最后不要忘记至少包含这个 CSS：

#powerTip {
position: absolute;
display: none;
z-index: 2147483647;
color:red;
}

我希望这有帮助

于 2013-06-12T22:35:09.773 回答