3

我现在正在学习/使用 JSF 2.0 (Sun Mojarra)，我想在我的 web 应用程序中有一个选项卡式窗格（单个选项卡可以命名为 General、Detail1、Detail2、...）。

我如何实现这一目标？到目前为止，我还没有找到任何文档:(

4

4 回答 4

6

其他人已经暗示过：Mojarra 是一个基本的JSF 实现。它提供了最少的强制性组件集，以涵盖大多数现有的 HTML 元素（表单、输入字段和表格）。由于 HTML 没有在单个元素中提供选项卡式面板，因此基本的 JSF 实现也不会这样做。

选项卡式面板基本上是一堆链接（或按钮）和面板，它们将被切换隐藏/可见。为了表示链接，您通常使用 HTML<a>元素。为了表示面板，您通常使用 HTML<div>元素。要切换显示/隐藏，基本上有两种方法：

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

  2. 或者，有条件地将请求的面板打印到响应中。可以通过链接（或按钮）中的请求参数确定已请求哪个面板。

这是方式 1 的基本copy'n'paste'n'runnable 示例：

<!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>by<h:outputLink>和<div>by<h:panelGroup layout="block">等等，但只要您不需要将它与支持 bean 和/或 JSF 组件树绑定，那么纯 HTML 也是完全有效的，并且开销更少.

您只需要<ui:repeat>根据一些列表“动态地”重复选项卡和面板。也不要忘记加入一个好的 CSS 镜头，让它看起来很美味。这基本上是大部分工作的所在。

毕竟这基本上也是PrimeFaces、RichFaces和IceFaces 等第3 方组件库正在做的事情。它们都在一个组件中提供了所需的功能，该组件完成了所有重复和美观的工作。PrimeFaces 例如有 a <p:tabView>、 RichFaces a <rich:tabPanel>、 IceFaces an<ice:panelTabSet>等等。

于 2010-08-16T13:27:31.257 回答
3

考虑使用现有的组件库。

PrimeFaces有一个TabView能够添加效果和动态内容。

为了实现 PrimeFaces，请按照说明进行操作

于 2010-08-16T09:36:31.527 回答
1

如果我可以这样称呼的话，JSF 只是一个“骨干”框架。开箱即用它为您提供的组件很少，因为这是创建者的意图 - 他们希望其他人用他们自己的工作扩展这个框架（只要他们遵循既定标准）。现在您既可以编写自己的组件，也可以使用 PrimeFaces、ICEFaces、RichFaces 等已经有许多组件的框架。

于 2010-08-16T09:55:01.630 回答
0

JSF 有许多有用的组件，它们提供了或多或少更漂亮的选项卡面板（以及许多其他组件）。RichFaces、IceFaces、OpenFaces（和上面提到的 PrimeFaces）。这些中的每一个都相当完整，您通常无法混合搭配，因此请查看每个的演示站点，然后选择您喜欢的那个。我喜欢 RichFaces，但部分原因是它是 Seam2 的默认设置，也是我第一次学习 JSF 的地方。构架

于 2012-06-05T18:50:30.313 回答