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

PrimeFaces TabView组件用法

本文概述

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

TabView属性

Attribute Default value Type Description
rendered true Boolean 它需要布尔值来指定组件的呈现。
activeIndex 0 Integer 用于设置活动选项卡的索引。
effect null String 用于设置过渡效果的名称。
effectDuration null String 它用于设置过渡效果的持续时间。
dynamic false Boolean 它可以使非活动选项卡的延迟加载。
cache true Boolean 它用于设置缓存。
onTabChange null String 单击选项卡时执行。
onTabShow null String 显示选项卡时执行。
onTabClose null String 它在选项卡关闭时执行。
style null String 用于设置主容器的内联样式。
var null String 它是引用集合中项目的迭代器的名称。
value 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 TabView 1
PrimeFaces TabView 2
赞(0) 打赏
未经允许不得转载:srcmini » PrimeFaces TabView组件用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏