PrimeFaces 手风琴面板

17 Mar 2025 | 阅读 2 分钟

它是一个容器组件，用于显示垂直堆叠的面板。它用于以手风琴格式显示数据。只需单击该项目，我们就可以随时从一个项目切换到另一个项目。当用户想要一次查看集合中的单个项目时，它很有用。

PrimeFaces 提供 <p:accordionPanel> 组件以在 JSF 应用程序中创建手风琴。

它还具有以下表格中的各种属性。

手风琴面板属性

属性	默认值	类型	描述
id	null	String	它是组件的唯一标识符。
activeIndex	false	String	它用于设置活动选项卡的索引。
style	null	String	它用于设置容器元素的内联 CSS。
onTabChange	null	String	当单击非活动选项卡时，它用于调用脚本。
onTabShow	null	String	当选项卡被激活时，它用于调用客户端脚本。
onTabClose	null	String	它用于调用客户端脚本，以便在选项卡关闭时调用。
动态的	false	Boolean	它定义了切换模式。
cache	true	Boolean	它定义了激活动态选项卡是否应再次从服务器加载内容。
值	null	列表	它采用列表进行迭代以显示动态选项卡数量。
var	null	String	它是用于动态选项卡数量的迭代器的名称
tabController	null	MethodExpr	它用于设置服务器端侦听器，以确定是否允许选项卡更改或选项卡关闭。

示例

在此，在以下示例中，我们正在实现 <p:accordionPanel> 组件。此示例包含以下文件。

JSF 文件

// accordian.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>Accordion Panel</title>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<h3 style="margin-top:0">Select a Course</h3>
<p:accordionPanel>
<p:tab title="Java The Programming Language">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/java.png" />
<h:outputText
value="This program includes Java core concepts and collection framework." />
</h:panelGrid>
</p:tab>
<p:tab title="Spring a Java Framework">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/spring.png" />
<h:outputText value="It is a Java Framework. It is designed to make web applications." />
</h:panelGrid>
</p:tab>
<p:tab title="Python a Programming Language">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/python.png" />
<h:outputText value="It is a multipurpose programming language. provides extensive tools." />
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
</h:body>
</html>

输出