个性化阅读
专注于IT技术分析

PrimeFaces提示工具组件用法

这是一个小的弹出框, 显示有关事件的信息。当用户与组件交互时, 它用于向用户显示消息。它包括各种功能, 如皮肤特效, 事件和主题支持。

PrimeFaces提供<p:tooltip>组件, 以在JSF应用程序中创建信息性消息。

它还具有下表列出的各种属性。

Attribute Default value Type Description
Value null Object 用于设置组件的值。
showEvent mouseover String 用于设置事件以显示工具提示。
showEffect fade String 用于显示的效果。
hideEvent mouseout String 用于设置事件以隐藏工具提示。
hideEffect fade String 用于设置用于隐藏的效果。
showDelay 150 Integer 它用于设置延迟时间以毫秒为单位显示工具提示。
hideDelay 0 Integer 用于设置隐藏工具提示的延迟时间(以毫秒为单位)。
for null String 它用于附加工具提示。
style null String 它用于设置工具提示的内联CSS样式。
escape true Boolean 它定义了html是否将被转义。
trackMouse false Boolean 工具提示位置跟随鼠标移动的指针。
beforeShow null String 它用于在显示工具提示之前执行脚本。
position right String 用于设置工具提示的位置。

例子

在下面的示例中, 我们正在实现<p:tooltip>组件。本示例包含以下文件。

JSF文件

// tooltip.xhtml

<?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://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Tooltip</title>
</h:head>
<h:body>
<h:panelGrid columns="3" cellpadding="8">
<h:outputText value="User Name: " />
<p:inputText id="username" title="Enter User Name" />
<p:tooltip id="toolTipFocus" for="username" showEvent="focus" hideEvent="blur" />
</h:panelGrid>
</h:body>
</html>

输出

PrimeFaces提示工具组件用法1
赞(0)
未经允许不得转载:srcmini » PrimeFaces提示工具组件用法

评论 抢沙发

评论前必须登录!