gpt4 book ai didi

java - 我如何在 JSF 2.0 (Sun Mojarra) 中获得选项卡式 Pane 组件

转载 作者:塔克拉玛干 更新时间:2023-11-01 21:51:17 25 4
gpt4 key购买 nike

我正在学习/使用 JSF 2.0 (Sun Mojarra),我想在我的 web 应用程序中有一个选项卡式 Pane (单个选项卡可以命名为 General、Detail1、Detail2 等)。

我如何实现这一点?到目前为止,我还没有找到任何文档:(

最佳答案

其他人已经暗示过:Mojarra 是一个基本 JSF 实现。它提供了最少的强制性组件集来覆盖大部分现有的 HTML 元素(表单、输入字段和表格)。由于 HTML 不在单个元素中提供选项卡式面板,因此基本的 JSF 实现也不会这样做。

选项卡式面板基本上是一堆链接(或按钮)和面板,可以切换隐藏/可见。为了表示链接,您通常使用 HTML <a>元素。为了表示面板,您通常使用 HTML <div>元素。要切换显示/隐藏,基本上有两种方法:

  1. 打印每个面板以响应,但使用 CSS 隐藏所有其他面板 display: none并使用 JavaScript 通过将新面板设置为 display: block 来切换可见性和旧面板 display: none .

  2. 或者,有条件地将请求的面板打印到响应中。可以通过链接(或按钮)中的请求参数来确定请求了哪个面板。

这是方法 1 的基本复制'n'粘贴'n'可运行示例:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SO question 3491969</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#tabs a').click(function() {
$('#panels').children().hide();
$($(this).attr('href')).show();
});
});
</script>
<style>
#tabs li { list-style-type: none; display: inline; border: 1px solid black; }
#panels { width: 600px; height: 400px; border: 1px solid black; }
.hide { display: none; }
</style>
</h:head>
<h:body>
<ul id="tabs">
<li><a href="#panel1">panel1</a></li>
<li><a href="#panel2">panel2</a></li>
<li><a href="#panel3">panel3</a></li>
</ul>
<div id="panels">
<div id="panel1">panel1 content</div>
<div id="panel2" class="hide">panel2 content</div>
<div id="panel3" class="hide">panel3 content</div>
</div>
</h:body>
</html>

你当然可以替换<a>通过 <h:outputLink><div>通过 <h:panelGroup layout="block">等等,但只要您不需要将它与支持 bean 和/或 JSF 组件树绑定(bind),那么纯 HTML 也完全有效并且开销更少。

你只需要带上<ui:repeat>以根据某些列表“动态”重复选项卡和面板。也不要忘记加入大量 CSS,使它看起来很美味。这基本上是大部分工作要做的地方。

毕竟这基本上也是那些第 3 方组件库喜欢的 PrimeFaces , RichFacesIceFaces是做。它们都在一个组件中提供了所需的功能,该组件完成了所有重复和引人注目的工作。例如 PrimeFaces 有一个 <p:tabView> , RichFaces <rich:tabPanel> , IceFaces <ice:panelTabSet>等等。

关于java - 我如何在 JSF 2.0 (Sun Mojarra) 中获得选项卡式 Pane 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3491969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com