如何在JSF 2.0中获取选项卡式窗格组件(Sun Mojarra)

Question

如何在JSF 2.0中获取选项卡式窗格组件(Sun Mojarra)

Tim*_*Tim 3 java jsf tabs tabbed-interface jsf-2

我现在正在学习/使用JSF 2.0(Sun Mojarra),我希望在我的webapp中有一个选项卡式窗格(单个选项卡可以命名为General,Detail1,Detail2,...).

我该如何实现这一目标？到目前为止,我还没有找到任何纪录片:(

Answer 1

Bal*_*usC 6

其他人已经暗示过:Mojarra是一个基本的 JSF实现.它提供了最小的必需组件集,以涵盖大多数现有HTML元素(表单,输入字段和表).由于HTML不在单个元素中提供选项卡式面板,因此基本的JSF实现也不会这样做.

标签面板基本上是一组链接(或按钮)和面板,它们将被隐藏/可见切换.要表示链接,通常使用HTML <a>元素.要表示面板,通常使用HTML <div>元素.要切换显示/隐藏,基本上有两种方式:

打印每个面板以响应,但使用CSS隐藏所有其他面板,display: none并使用JavaScript通过将新面板设置为display: block和旧面板来切换可见性display: none.
或者,有条件地将请求的面板打印到响应中.可以通过链接(或按钮)中的请求参数来确定已请求哪个面板.

这是方式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>

Run Code Online (Sandbox Code Playgroud)

您当然可以替换<a>by <h:outputLink>和<div>by <h:panelGroup layout="block">等,但只要您不需要将它绑定到支持bean和/或JSF组件树中,那么纯HTML也是完全有效的并且开销较小.

您只需要<ui:repeat>根据某些列表"动态"重复选项卡和面板.另外不要忘记投入一个很好的CSS镜头,使它看起来像美味.这基本上是大部分工作的用武之地.

这毕竟基本上也是PrimeFaces,RichFaces和IceFaces等第三方组件库正在做的事情.它们都在单个组件中提供所需的功能,可以完成所有重复和眼睛的工作.例如PrimeFaces有一个<p:tabView>,RichFaces一个<rich:tabPanel>,IceFaces一个<ice:panelTabSet>等等.

归档时间：	15 年，10 月前
查看次数：	15689 次
最近记录：	14 年前