PrimeFaces AccordionPanel实例 _PrimeFaces组件

本文概述

AccordionPanel属性
例子

【PrimeFaces AccordionPanel实例】它是一个容器组件, 显示垂直堆叠的面板。它用于以手风琴格式显示数据。我们可以随时单击一个项目即可将其从一个项目切换到另一个项目。当用户希望一次从集合中看到单个项目时, 此功能很有用。
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:outputTextvalue="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/It is a multipurpose programming language. provides extensive tools." /> < /h:panelGrid> < /p:tab> < /p:accordionPanel> < /h:form> < /h:body> < /html>

输出