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

PrimeFaces对话框示例

本文概述

它是一个面板组件, 可以覆盖页面上的其他元素。它用于创建一个弹出窗口, 也可用于显示其他元素。它提供了show()和hide()两种方法来管理组件的可见性。

<p:dialog>用于在JSF应用程序中创建对话框。它还具有下表列出的各种属性。

对话框属性

Attribute 默认值 Type Description
header null String 用于设置标题的文本。
draggable true Boolean 它指定可拖动性。
resizable true Boolean 它指定可调整大小。
modal false Boolean 它启用了模态。
visible false Boolean 启用后, 默认情况下对话框是可见的。
width auto Integer 用于设置对话框的宽度。
height auto Integer 用于设置对话框的高度。
minWidth 150 Integer 用于设置可调整大小对话框的最小宽度。
minHeight 0 Integer 用于设置可调整大小对话框的最小高度。
style null String 用于设置对话框的内联样式。
showHeader true Boolean 它定义标题内容的可见性。
positionType fixed String 它定义对话框是在滚动状态下保留在视口中还是保持其位置。
responsive false Boolean 它用于使组件具有响应性。
footer null String 用于设置页脚的文本。

例子

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

JSF文件

// dialog.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>Dialog</title>
</h:head>
<h:body>
<p:commandButton value="Click for more info" type="button" onclick="PF('sample').show();" />
<p:dialog header="Dialog Box" widgetVar="sample" minHeight="40">
<h:outputText value="Product Description." />
</p:dialog>
</h:body>
</html>

输出

PrimeFaces对话框1
PrimeFaces对话框2
赞(0)
未经允许不得转载:srcmini » PrimeFaces对话框示例

评论 抢沙发

评论前必须登录!