PrimeFaces TabView

17 Mar 2025 | 阅读 2 分钟

它是一个容器组件，用于在同一网页中将内容分组到选项卡中。 <p:tabView> 组件用于创建容器。 <p:tab> 是 <p:tabView> 的子组件，用于单独创建选项卡。当我们想在同一网页上显示更多信息时，它很有用。

TabView 属性

属性	默认值	类型	描述
rendered	true	Boolean	它接受布尔值来指定组件的渲染。
activeIndex	0	Integer	用于设置活动选项卡的索引。
效果	null	String	用于设置过渡效果的名称。
effectDuration	null	String	用于设置过渡效果的持续时间。
动态的	false	Boolean	启用非活动选项卡的延迟加载。
cache	true	Boolean	用于设置缓存。
onTabChange	null	String	单击选项卡时执行。
onTabShow	null	String	显示选项卡时执行。
onTabClose	null	String	在选项卡关闭时执行。
style	null	String	用于设置主容器的内联样式。
var	null	String	是迭代器的名称，用于引用集合中的一个项目。
值	null	Object	用于显示动态选项卡的集合模型。
orientation	top	String	用于设置选项卡标题的方向。
dir	ltr	String	定义文本方向，有效值为 ltr 和 rtl。
scrollable	false	Boolean	启用时，选项卡标题可以水平滚动而不是换行。
prependId	true	Boolean	用于预先添加 id。
tabindex	0	String	指定元素在选项卡顺序中的位置。

示例

在这里，在下面的示例中，我们正在实现 <p:tabView> 组件。此示例包含以下文件。

JSF 文件

// tabView.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>TabView</title>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<h3 style="margin-top:0">Course Description</h3>
<p:tabView>
<p:tab title="Java">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/java.png" />
<h:outputText
value="Java is a programming language and a platform.
Java is a high level, robust, secured and object-oriented programming language.
Platform: Any hardware or software environment in which a program runs, is known as a platform. 
Since Java has its own runtime environment (JRE) and API, it is called platform." />
</h:panelGrid>
</p:tab>
<p:tab title="Spring">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/spring.png" />
<h:outputText value="Spring is a lightweight framework. It can be thought of as a framework 
of frameworks because it provides support to various frameworks such as Struts, Hibernate, Tapestry, EJB, JSF etc. 
The framework, in broader sense, can be defined as a structure where we find solution of the various technical problems. " />
</h:panelGrid>
</p:tab>
<p:tab title="Python">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/python.png" />
<h:outputText value="Python is a simple, easy to learn, powerful, high level and object-oriented 
programming language. Guido Van Rossum is known as the founder of python programming." />
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>

输出

下一主题PrimeFaces 工具栏

PrimeFaces TabView

TabView 属性

示例

JSF 文件

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PrimeFaces 教程

PrimeFaces Ajax

UI 组件

面试题

PrimeFaces TabView

TabView 属性

示例

JSF 文件

相关帖子

PF InputMask

PF CommandButton

PF BooleanCheckbox

PF SelectCheckboxMenu

PF AutoComplete

PF NotificationBar

PF InputText

PF SelectOneListbox

PF Growl

PF Dialog

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器