Java 如何创建选项卡-Jquery或JSF

我想创建带有选项卡的JSF页面。差不多。但是我想知道如果我选择使用Jquery来实现这一点，我是否可以实现延迟加载——当我单击JSF页面上的一个选项卡时，打开该选项卡时就会生成内容。可以在纯JSF中实现标签的延迟加载吗？我认为在这两种情况下我都可以轻松实现AJAX

最好的祝愿

该组件支持延迟加载

引自展览：

当选项卡内容是动态的时，也可以使用ajax延迟加载 属性设置为“true”，只有活动选项卡的内容才会显示 呈现并单击惰性选项卡将使用 AJAX此行为便于保存bandwith并减小页面大小 处理包含大量内容的选项卡时

来自showcase的快速示例：

//标签

---

如果在选项卡之间切换，

cache

属性用于防止ajax重新加载选项卡内容。

使用jQuery UI实现ajax选项卡一点问题都没有

---

查看使用ajax的jQuery选项卡的文档，并单击“查看源代码”以查找所需的代码。

您可以查看《Core

Java Server Faces第三版》

第339页，了解如何使用

h:panelGrid

实现简单选项卡

输出如下所示：

这是本书中的代码示例：

...
<h:form>
<h:panelGrid styleClass="tabbedPane" columnClasses="displayPanel">
<!-- Tabs -->
<f:facet name="header">
<h:panelGrid columns="4" styleClass="tabbedPaneHeader">
<h:commandLink tabindex="1"
title="#{msgs.jeffersonTooltip}"
styleClass="#{tp.jeffersonStyle}"
actionListener="#{tp.jeffersonAction}">
#{msgs.jeffersonTab}
</h:commandLink>
...
</h:panelGrid>
</f:facet>
<!-- Tabbed pane content -->
<ui:include src="washington.xhtml" />
<ui:include src="roosevelt.xhtml" />
<ui:include src="lincoln.xhtml" />
<ui:include src="jefferson.xhtml" />
</h:panelGrid>
</h:form>
...

。。。
#{msgs.jeffersonTab}
...
...

描述如下：

The tabbed pane is implemented with h:panelGrid. Because we do not specify
the columns attribute, the panel has one column. The panel’s header—defined
with an f:facet tag—contains the tabs, which are implemented with another
h:panelGrid that contains h:commandLink tags for each tab. The only row in the panel
contains the content associated with the selected tab.
When a user selects a tab, the associated action listener for the command link is
invoked and modifies the data stored in the backing bean. Because we use a
different CSS style for the selected tab, the styleClass attribute of each h:commandLink
tag is pulled from the backing bean with a value reference expression.
As you can see from the top picture in Figure 8–11, we have used the title
attribute to associate a tooltip with each tab. Another accessibility feature is the
ability to move from one tab to another with the keyboard instead of the
mouse. We implemented that feature by specifying the tabindex attribute for
each h:commandLink.
The content associated with each tab is statically included with the JSP include
directive. For our application, that content is a picture and some text, but
you could modify the included JSF pages to contain any set of appropriate
components. Notice that even though all the JSF pages representing content are
included, only the content associated with the current tab is rendered. That is
achieved with the rendered attribute—for example, jefferson.xhtml looks like this:
Putting It All Together
<h:panelGrid columns="2" columnClasses="presidentDiscussionColumn"
rendered="#{tp.jeffersonCurrent}">
<h:graphicImage value="/images/jefferson.jpg"/>
<span class="tabbedPaneContent">"#{msgs.jeffersonDiscussion}"</span>
</h:panelGrid>
Figure 8–12 shows the directory structure for the tabbed pane application and
Listings 8–14 through 8–17 show the most important files.

选项卡式窗格是用h:panelGrid实现的。因为我们没有具体说明
在columns属性中，面板有一列。面板的标题已定义
使用f:facet标记包含选项卡，这些选项卡由另一个实现
h:panelGrid，包含每个选项卡的h:commandLink标记。面板中唯一的一行
包含与所选选项卡关联的内容。
当用户选择选项卡时，命令链接的关联操作侦听器为
调用并修改存储在支持bean中的数据。因为我们使用
所选选项卡的不同CSS样式，每个h:commandLink的styleClass属性
使用值引用表达式从支持bean中提取标记。
从图8-11的顶部图片中可以看到，我们使用了标题
属性将工具提示与每个选项卡关联。另一个辅助功能是
使用键盘而不是键盘从一个选项卡移动到另一个选项卡的能力
老鼠我们通过为指定tabindex属性来实现该特性
每个h:commandLink。
与每个选项卡关联的内容静态地包含在JSP include中
指令。对于我们的应用程序，内容是一张图片和一些文本，但是
您可以修改包含的JSF页面以包含任何一组适当的
组件。注意，尽管所有表示内容的JSF页面都是
包含时，仅呈现与当前选项卡关联的内容。就是
例如，jefferson.xhtml是通过渲染属性实现的，如下所示：
把它们放在一起
“{msgs.jeffersonDiscussion}”
图8-12显示了选项卡式窗格应用程序的目录结构和
清单8-14到8-17显示了最重要的文件。

---

不幸的是，我不知道如何为这段代码添加延迟加载和AJAX支持

注意：如果您想让您的选项卡成为会话范围，请阅读答案按钮中的说明…

因为您不想使用任何第三方库，所以这里有一个PureJSF+jQuery示例

JSF+Jquery+Ajax延迟加载+查看范围bean示例…

B.T.W以下是最终的情况：

单击每个选项卡时，您可以在web服务器控制台上查看

@PostConstruct

和

@PreDestroy

的打印输出

选项卡的内容—xhtml页面及其bean将在单击选项卡时加载（延迟加载），并在单击其他选项卡时销毁

我建议你创建一个新的项目，慢慢地把所有的文件放进去，开始播放和查看它。。。它100%工作，但我放了一些打印件只是为了看看它真的工作

这个例子非常简单明了

首先去

并将

jquery-1.7.1_query-min.js

和

jquery-ui-1.8.18.custom.min.js

放在

WebContent\resources\js

和

jquery-ui-1.8.18.custom.css

中

现在转到其他文件

myTabs.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
 <h:outputScript library="js" name="jquery-1.7.1_.min.js" target="head" />
 <h:outputScript library="js" name="jquery-ui-1.8.18.custom.min.js" target="head" />
 <h:outputStylesheet library="css" name="jquery-ui-1.8.18.custom.css" target="head"     />
 <h:outputScript library="js" name="mytabs.js" target="head" />
</h:head>
<h:body>

<f:view>
    <h:form prependId="false">
        <h:panelGroup id="tabs" layout="block">
            <ul>
                <c:forEach items="#{myTabs.tabs}" var="tab">
                    <li><a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()">#{tab.tabid}</a></li>
                    <h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{myTabs.switchPages(tab.tabid)}" style="display:none">
                        <f:ajax render="tabs"></f:ajax>
                    </h:commandButton>  
                </c:forEach>
            </ul>

            <c:forEach items="#{myTabs.tabs}" var="tab">
                <h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq myTabs.selectedTab}">
                    <ui:include src="#{tab.tabfilename}"></ui:include>
                </h:panelGroup>
            </c:forEach>
        </h:panelGroup>
    </h:form>
</f:view>
</h:body>
</html>

Tab1Page（Tab2Page和Tab3Page完全相同，只需更改所有位置的数字即可）

tab1.xhtml（tab2.xhtml和tab3.xhtml完全相同-只需替换数字）

为了使用会话范围bean：

MyTabs.java

中的

switchPages

方法应该是

void

并且不返回任何内容，如下所示

    public void switchPages(String selTab) {
    selectedTab = selTab;
}

---

是的，这是一个可能的解决方案。但是使用纯JSF有可能达到同样的效果吗？没有。您至少需要一些额外的javascript和css。好的，我可以使用JSF和延迟加载的JQuery吗？两种解决方案中哪一种需要更少的资源。例如，我将使用带有8个选项卡的JSF页面。每个选项卡都有带有分页的JSF数据表，等等。这两个选项中哪一个更适合包含多行代码的JSF页面？我不知道。我对jQuery不是很有经验，这是一个很好的例子。谢谢你的回答。查看《核心Java服务器面》一书，我发现可以用纯JSF创建选项卡。但是有没有可能用延迟加载和AJAX创建JSF选项卡？@PeterPenzov还没有尝试过。。。这就是使用纯JSF&Jquery&Ajax的方法Loading@PeterPenzov我的解决方案是否完全符合您的要求？我想问您一些问题。这是《核心Java服务器》一书中的代码

package pack;



public class MyTabObject{


String tabfilename;
String tabid;
public String getTabfilename() {
    return tabfilename;
}
public void setTabfilename(String tabfilename) {
    this.tabfilename = tabfilename;
}
public String getTabid() {
    return tabid;
}
public void setTabid(String tabid) {
    this.tabid = tabid;
}
public MyTabObject(String tabfilename, String tabid) {
    super();
    this.tabfilename = tabfilename;
    this.tabid = tabid;
}

}

package pack;

import java.io.Serializable;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class Tab1Page implements Serializable{

/**
 * 
 */
private static final long serialVersionUID = 254415216070877770L;
// Constants
public final static String hashKey = "tab1PageTab";
public String actionString = "";

@PostConstruct
public void post(){
  Format formatter;
  Date date = new Date();

  // Time formate 01:12:53 AM
  formatter = new SimpleDateFormat("hh:mm:ss a");
  tabName = formatter.format(date);
    System.out.println("Tab1Page\t"+tabName+"\t@PostConstruct...");
}

@PreDestroy
public void destroy(){
  Format formatter;
  Date date = new Date();

  // Time formate 01:12:53 AM
  formatter = new SimpleDateFormat("hh:mm:ss a");
  tabName = formatter.format(date);
    System.out.println("Tab1Page\t"+tabName+"\t@PreDestroy...");
}


String tabName;

public String getTabName() {
    return this.getClass().getName().substring(this.getClass().getName().lastIndexOf("."))+"\t"+tabName;
}
public void setTabName(String tabName) {
    this.tabName = tabName;
}

public String getActionString() {
    return actionString;
}

public void setActionString(String actionString) {
    this.actionString = actionString;
}

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:panelGroup>
    <h:form>
        <h:outputText value="#{tab1Page.tabName}" />
    </h:form>
</h:panelGroup>
</ui:composition>

$(document).ready(function () { 
    $("#tabs").tabs();
});

$(window).load(function() {
    jsf.ajax.addOnEvent(function (data) {
        if (data.status === "success") {
                $("#tabs").tabs();
        }
    });
});

    public void switchPages(String selTab) {
    selectedTab = selTab;
}