srcmini本文概述
它是一个容器组件, 显示垂直堆叠的面板。它用于以手风琴格式显示数据。我们可以随时单击一个项目即可将其从一个项目切换到另一个项目。当用户希望一次从集合中看到单个项目时, 此功能很有用。
PrimeFaces提供了<p：accordionPanel>组件以在JSF应用程序中创建手风琴。
它还具有下表列出的各种属性。
AccordionPanel属性
| Attribute | 默认值 | Type | Description |
|---|---|---|---|
| id | null | String | 它是组件的唯一标识符。 |
| activeIndex | false | String | 用于设置活动选项卡的索引。 |
| style | null | String | 它用于设置容器元素的内联CSS。 |
| onTabChange | null | String | 单击非活动选项卡时, 它用于调用脚本。 |
| onTabShow | null | String | 当选项卡被激活时, 它用于调用客户端脚本。 |
| onTabClose | null | String | 它用于调用客户端脚本以在选项卡关闭时调用。 |
| dynamic | false | Boolean | 它定义了切换模式。 |
| cache | true | Boolean | 它定义了激活动态选项卡是否应再次从服务器加载内容。 |
| value | null | List | 需要列表进行迭代才能显示选项卡的动态数量。 |
| 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>输出
评论前必须登录！
注册